如何在网格库中的每张照片的中间底部放置标题

Question

如何将标题放在图像的底部，放在网格库中每张照片的中间，使用薄薄的浅灰色背景，以便无论我使用什么图像都能完全看到？到目前为止，我只把文字放在下面，但没有放在图片上。感谢您抽出时间，这是我的代码：

body {
margin: 0
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
background: rgb(255, 255, 255);
padding: 15px;
}
.container img {
width: 80%;
display: block;
background-color: cornflowerblue;
border-radius: 12%;
}
.container img:hover {
transform: scale(1.04);
}
h2,
p {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
.overlay {
position: absolute;
bottom: 10px;
left: 19px;
font-size: 13px;
}

<div class="container">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
<img src="placeholder-image.png" alt="photo">
</div>

Answer 1

在figure元素中插入图像。为文本添加figcaption。

.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
figure {
position: relative;
display: flex;
justify-content: center;
}
figcaption {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, .2);
padding: 5px;
}
img {
width: 80%;
display: block;
}

<div class="container">
<figure>
<img src="http://i.imgur.com/60PVLis.png" alt="">
<figcaption>text text text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" alt="">
<figcaption>text text text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" alt="">
<figcaption>text text text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" alt="">
<figcaption>text text text</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/60PVLis.png" alt="">
<figcaption>text text text</figcaption>
</figure>
</div>