Positioning text over layered images - html

Question

I'm creating layered images right now but i need to somehow get text over each layered image. Every time I try adding it, it keeps just sitting next to the image itself. I can't get the positioning down.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
<div id="container">
<div>
<img class="imageOne" src="https://www.fillmurray.com/380/150/">
</div>
<div>
<img class="imageTwo" src="https://www.fillmurray.com/260/155/">
</div>
<div>
<img class="imageThree" src="https://www.fillmurray.com/270/100/">
</div>
</div>
I created a jsfiddle to see what it looks like with the images layered here:
https://jsfiddle.net/k1rpycq2/

Answer 1

I would use pseudo-selector to display text over the images, but the div element that contains the image must be of the same width as the image.
Do note that I had to switch the class attribute to the parent div element.
[edit] I don't like writing text in CSS so I used a data-attribute instead on the pseudo-element.
content: attr(data-caption);
#container {
position: relative;
/*width: 65%;*/
top: 0;
left: 0;
}
.imageOne {
display: inline-block;
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
.imageOne::before,
.imageTwo::before,
.imageThree::before {
content: attr(data-caption);
position: absolute;
top: 50%;
left: 0px;
right: 0px;
display: block;
transform: translateY(-50%);
padding: 0.5rem;
background-color: rgba(255,255,255,0.7);
font-family: Verdana;
text-transform: uppercase;
letter-spacing: 9px;
text-align: center;
}
<div id="container">
<div class="imageOne" data-caption="These">
<img src="https://picsum.photos/200/200">
</div>
<div class="imageTwo" data-caption="Beautiful">
<img src="https://picsum.photos/200/80">
</div>
<div class="imageThree" data-caption="Images">
<img src="https://picsum.photos/200/100">
</div>
</div>

Answer 2

What you can do, is to put the images as background in the targeted div elements using background-image and then positon your text in the div:
HTML
<div id="container">
<div>
text # 1
</div>
<div>
text # 2
</div>
<div>
text # 3
</div>
</div>
CSS
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
background-image:url(/image1-380x150.jpg);
background-size:contain;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
background-image:url(/image2-260x155.jpg);
background-size:contain;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
background-image:url(/image3-270x100.jpg);
background-size:contain;
}

Answer 3

What we need to do here is work with how position:relative and position:absolute interact. Anything which is absolute is positioned absolutely in relation to the nearest ancestor with postition:relative
Using this, create a bounding div to layer your figures. Then use the figure tag with position:absolute positioning the figcaption within that using position:absolute.
#container {
position: relative;
width: 65%;
top: 0;
left: 0;
}
.imageOne {
position: relative;
z-index: 10;
top: 0;
left: 0;
}
.imageTwo {
position: absolute;
top: 66px;
left: 35%;
z-index: 20;
}
.imageThree {
position: absolute;
top: 190px;
left: 10%;
z-index: 30;
}
[class^="image"] figure {
position: relative;
}
[class^="image"] figure>figcaption {
position: absolute;
top: 0;
background-color: rgba(255, 255, 255, 0.8)
}
<div id="container">
<div class="imageOne">
<figure>
<img src="https://www.fillmurray.com/g/380/150/">
<figcaption>Bill One</figcaption>
</figure>
</div>
<div class="imageTwo">
<figure>
<img src="https://www.fillmurray.com/260/155/">
<figcaption>Bill Two</figcaption>
</figure>
</div>
<div class="imageThree">
<figure>
<img src="https://www.fillmurray.com/270/100/">
<figcaption>Bill Three</figcaption>
</figure>
</div>
</div>