Text on the image with css and html only - html

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.

Answer 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>