<div class="photo-wrap">
<img class="photo" src="https://via.placeholder.com/800x400" alt="">
<div class="photo-caption">Описание картинки...</div>
</div>
.photo-wrap{
position:relative;
}
.photo{
width:100%;
display:block;
}
.photo-caption{
background:red;
width:400px;
padding:15px;
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%,50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.