How to place text in bottom of an image (Polaroid image like) - html

Question

I am struggling to make a polaroid image like. In which the image have a text in the bottom. I tried every instruction but failed to do so.
Here is my HTML code
<div id="Places" class="gallery">
<ul>
<li>
<a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
<img src="images/babot1.jpg" alt="bobat1">
</a>
</li>
<li>
<a href="https://www.w3schools.com/css/css_image_gallery.asp" target="_blank">
<img src="images/lhouse1.jpg" alt="bobat1">
</a>
</li>
<li>
<a href="https://www.youtube.com/playlist?list=PL6n9fhu94yhVm6S8I2xd6nYz2ZORd7X2v" target="_blank">
<img src="images/babot1.jpg" alt="bobat1">
</a>
</li>
</ul>
</div>
and this is my css code that I use
div.gallery{
border:2px solid #ddd;
margin:0 auto;
margin-top:100px;
margin-bottom:30px;
border-radius:3px;
width:98%;
}
div.gallery::before{
content: "";
clear: both;
display: table;
}
div.gallery ul{
list-style-type:none;
overflow:hidden;
margin:0 auto;
}
div.gallery li a img {
margin: 20px 20px 21px 20px;
width: 28.50%;
float:left;
padding-bottom:50px;
}
EDIT 1:
Here is the sample photo of what I got.

Answer 1

<figure> + <figcaption> have been designed for this.
To make it Polaroid like, here's what I'd do:
figure {
border: 1px solid #f5f5f5;
border-radius: 5px;
padding: 10px;
display: inline-block;
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
figure img {
display: block;
}
figcaption {
display: block;
padding: 1rem 0 .5rem;
color: #777;
}
<figure>
<img src="http://placehold.it/350x250" />
<figcaption>This would be a caption</figcaption>
</figure>
<figure>
<img src="http://placehold.it/250x350" />
<figcaption>This would be another caption</figcaption>
</figure>
Please note you're currently floating the <img> tags. If you want the above to work, you need to remove the following from your current CSS:
div.gallery li a img {
margin: 20px 20px 21px 20px;
width: 28.50%;
float:left;
padding-bottom:50px;
}
You can float your <figure>s instead.

Answer 2

there is an html tag to do what you want:
<figure>
<img src="myImage.jpg" alt="my image">
<figcaption>This is my image</figcaption>
</figure>

Answer 3

Put your text inside a div, position it absolute and give it a z-index of 90 or higher.
<div id="txt">This is a title</div>
<style>
position: absolute;
z-index: 99;
</style>