文本显示在图像上，悬停在一系列图像中

Question

所以我知道如何在只有一个图像时使文本出现在使用 CSS 悬停时。 不过...我想制作一个页面，其中有三个相同尺寸的图像排列在一起，如下所示：

x | x

| x

将

鼠标悬停在一个图像上会显示有关该图像的文本简介，而其他两个图像则消失。 我需要javascript/jQuery来做到这一点，还是可以单独在CSS中完成？

此外，这有点复杂，对于项目来说不是必需的，但是是否可以在文本出现时让悬停的图像向左移动（对于第二个和第三个图像）？ 和/或是否有可能有一个过渡功能，以便文本看起来像是从屏幕后面滚动出来的？

最后这些部分是完全可选的，甚至可能不可行，实际上我只是想弄清楚如何让单个div 出现在悬停上，而其他图像则消失。 谢谢！

Answer 1

是的，仅使用 CSS 就可以做到这一点。

有很多方法可以实现这一点，但一般的想法是为每个图像（您的问题中的x）提供一个父元素，其中包含您希望出现在图像上的图像和标题。然后，您可以使用 CSS 在悬停时使字幕叠加和/或过渡到位置。

一个简单的例子是：（参见演示代码）。

<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>
<div class="image-wrapper">
    <img src="http://placehold.it/180x120/eeeeee">
    <div class="caption">
        Your caption text here.
    </div>
</div>

.CSS

.image-wrapper {
    position: relative;
    width: 180px;
    float: left;
    margin-right: 10px;
}
.image-wrapper:last-child {
    margin-right: 0;
}
.image-wrapper .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(0,0,0, 0.6);
    color: #fff;
    padding: 0.5rem;
}
.image-wrapper:hover .caption {
    display: block;
}