html - CSS - 获取图像以在悬停时在图像顶部显示文本叠加层？

Question

我目前有几个列表项。每个都有一张图片，后面跟着一些文字。

ul {
    width:300px;
    list-style-type: none;
}

<ul>
    <li>
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#">Cool image</a>
    </li>
    <li>
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#">Cool image</a>
    </li>
    <li>
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#">Cool image</a>
    </li>
</ul>

我不知道如何/是否可以使用纯 CSS 来做到这一点？我希望图像在悬停时在其顶部显示文本(有点像 imgur.com 的做法。)在 imgur.com 上，如果您将鼠标悬停在缩略图上，它会在底部告诉您有多少赞成票。我该怎么做？

Answer 1

如果我理解正确 - 您只需要在相对定位的 LI 项内添加绝对定位文本。并且不要忘记将您的 .thumbnail 类添加到 LI 中。
您还可以使用 top、left、bottom 和 right CSS 属性来尝试文本定位。

注意:要使文本仅在悬停时可见 - 只需使用 display:none 默认隐藏文本并在 :hover 事件中显示它.
注意 2: 还可以通过 transitions 和不透明度添加动画。

ul {
    width:300px;
    list-style-type: none;
}
.thumbnail {
    position:relative;
}

.thumbnail .text {
  opacity: 0;
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: opacity 500ms;
}

.thumbnail:hover .text {
  opacity: 1;
}

<ul>
    <li class="thumbnail">
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#" class="text">Cool image</a>
    </li>
    <li class="thumbnail">
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#" class="text">Cool image</a>
    </li>
    <li class="thumbnail">
        <a href=""><img src="http://placehold.it/350x150"/></a>
        <a href="#" class="text">Cool image</a>
    </li>
</ul>