带有悬停文本的响应式图库缩略图

Question

我仍在访问我的投资组合网站并努力使次要细节正确无误。

我已经让 9x9 响应式缩略图正常工作，悬停时亮度会发生变化，但是，现在我需要添加每个缩略图选择的标题。

我需要文本仅在悬停时出现，然后位于每个图像的中心（每个文本对于缩略图都是唯一的，这就是为什么我的一些代码看起来不必要地长）。

这是这个画廊的目标，但现在，我真的只是想弄清楚如何让文本移动到每个画廊图像的中心。

如果做不到这一点，我想我可以尝试将图像设置为每个 div 的背景，这样似乎更容易对齐文本。

.thumb_title{
position: absolute;
color: #FFFFFF;
}

span{
text-align: center;
}

上面，我尝试使用绝对定位将文本从正常流中取出，然后将其居中到 div，尽管我很确定我的 css 原则在这里是不正确的。

https://jsfiddle.net/205dmxdw/

Answer 1

这应该做到：

.imgContainer {
    position: relative;
    float: left;
    width: 33.3%;
    margin: 0px;
    text-align: center;
}

.thumb_title {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
}

带有悬停文本的响应式图库缩略图

Responsive gallery thumbnails with text on hover

css

text

image

alignment

hover