Text on the image with css and html only

Question

I'm trying to add different texts on the center of images. Seems like I'm unable to do this and will need some help with the task.

So, I have 4 images on the page. Now I want to put text on the images. What I have so far are 4 images on page but the text is not appear properly. Here is the part of the html

.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.class {
  position: relative;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: green;
  left: 0;
  bottom: 50%;
  padding: 1em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="img-row">
  <a href="">
    <button class="button">
      Button
    </button>
  </a>
</div>
<div id="img-row">

  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>

</div>
<div id="img-row">
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
</div>

This is how it looks like so far: JSFIDDLE. Text appears only two times.

your text goes over the whole width for both images in a row. you have your text twice, but it is on the same position so you only see one — Marcel Schmid
– Marcel Schmid, Commented Feb 15, 2017 at 6:58

Zze · Accepted Answer · 2017-02-15 07:48:06Z

1

Because you have nested your images within an a tag, then the text was aligning left:0 of img-row. Now it correctly aligns with the image because I added:

#img-row > a {
  position: relative;
}

Consider the following example:

#a2{
  position: relative;
  display: block;
}

p{
  position: absolute;
  top: 0px;
  margin: 0;
}

<a id="a1"><p>hello1</p></a>
<a id="a2"><p>hello2</p></a>

absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body... http://learnlayout.com/position.html

Your working example:

.images {
  text-align: center;
  padding: 15px 15px;
  position: relative;
  vertical-align: middle;
  display: inline;
  width: 430px;
  margin: 10px 0;
}
#img-row {
  display: block;
  margin-top: -15px;
  position: relative;
  height: auto;
  max-width: auto;
  overflow-y: hidden;
  overflow-x: auto;
  word-wrap: normal;
  white-space: nowrap;
  text-align: center;
}
#img-row > a {
  position: relative;
}
#img-row:after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.class {
  position: relative;
}
.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px;
}
button.button {
  width: 570px;
  margin-left: 182px;
  height: 40px;
  font-size: 30px;
}
.caption-text {
  display: block;
  position: absolute;
  width: 100%;
  color: green;
  left: 0;
  bottom: 50%;
  padding: 1em;
  font-weight: 700;
  z-index: 2;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
}

<div id="img-row">
  <a href="">
    <button class="button">
      Button
    </button>
  </a>
</div>
<div id="img-row">

  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>

</div>
<div id="img-row">
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
  <a href="">
    <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="images" />
    <figcaption class="caption-text">This is a caption text</figcaption>
  </a>
</div>

edited Feb 15, 2017 at 7:48

answered Feb 15, 2017 at 6:58

Zze

18.9k14 gold badges95 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

VLS Over a year ago

Thanks. Thats perfect.

Zze Over a year ago

@VLS You were so close!

VLS Over a year ago

it's always like this. Something very small always missing.. Thank's again. Can accept answer in 1min

Collectives™ on Stack Overflow

Text on the image with css and html only

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related