How to put text on top of image? - html

Question

I have some HTML and CSS setup for a simple image gallery.
I've been trying to add white text on top of each of the images in the center.
Link to HTML + CSS:
https://jsfiddle.net/babis95/zdhne95u/
.section-images
{
padding: 0;
}
.images-showcase
{
list-style: none;
width: 100%;
}
.images-showcase li
{
display: block;
float: left;
width: 25%;
}
.destination-photo
{
width: 100%;
margin: 0;
overflow: hidden;
background-color: #000;
}
.destination-photo img
{
opacity: 0.7;
width: 100%;
height: auto;
transform: scale(1.15);
transition: transform 0.5s, opacity 0.5s;
}
.destination-photo img:hover
{
opacity: 1;
transform: scale(1.03);
}
.section-images p
{
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<section class='section-images'>
<ul class='images-showcase'>
<li>
<figure class='destination-photo'>
<img src='https://image.shutterstock.com/image-photo/blue-suitcase-sun-glasses-hat-600w-1094945555.jpg' alt='Image 1'>
<p>IMAGE TEXT 1</p>
</figure>
</li>
<li>
<figure class='destination-photo'>
<img src='https://image.shutterstock.com/image-photo/overhead-view-travelers-accessories-essential-600w-425996818.jpg' alt='Image 2'>
</figure>
</li>
<li>
<figure class='destination-photo'>
<img src='https://image.shutterstock.com/image-photo/woman-traveler-suitcase-on-color-600w-578891674.jpg' alt='Image 3'>
</figure>
</li>
</ul>
</section>
I researched different ways but none seem to work with they way i set up my code:
.section-images p
{
color: white;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
all this does is, adds a the text in the middle of the whole container, and moves images off of the alignment
This code seem to work on single image in a div, but not when multiple images are used.

Answer 1

You just need position: relative; on your .destination-photo
Your Text is placed on an absolute position. Since you don't have a relative position, the images are placed absolutely to the document. Adding position: relative to the image would give the p tags a position to start with.