文本出现在图像悬停上，并带有一系列图像[关闭]

Question

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

x | x | x

将鼠标悬停在一张图片上会显示关于该图片的文字简介，而其他两张图片会消失。我需要 javascript/jQuery 来做到这一点还是可以单独在 CSS 中做到这一点？

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

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

Answer 1

是的，仅使用 CSS 即可。

有很多方法可以实现这一点，但总体思路是为每个图像（问题中的 x）设置一个父元素，其中包含图像和您希望在图像上显示的标题。然后，您可以使用 CSS 使标题覆盖和/或在悬停时过渡到位置。

一个简单的例子是：（见demo code）。

<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;
}