文本出现在图像悬停与系列中的图像

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

x | x | x

将鼠标悬停在一幅图像上会使该图像出现文字blurb，而其他两幅图像消失。我需要JavaScript/jQuery来做到这一点，还是有可能在CSS中独自完成？

此外，这项工作稍微复杂一点，对于项目来说不是必需的，但是当文本出现时，是否有可能让图像被放置在左侧（第二张和第三张图像）？和/或是否有可能具有转换功能，以便文本看起来像从屏幕后面滚动出来，或者出现这种情况？

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

来源

2014-02-20 user3333637

是的，所有的，应该是可能的只是CSS – tewathia

你能不能把你的代码的jsfiddle，所以我们可以看到更好？ – Ismatjon

也许看看其中的一些：http://www.hongkiat.com/blog/css3-image-captions/和http://tympanus.net/Tutorials/OriginalHoverEffects/index.html – HJ05

是的，只用CSS就可以。

有很多方法可以实现这个目标，但总体思路是为每个图像（包括要显示在图像上的图像和标题）提供一个父元素。然后，您可以使用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; 
}

来源

2014-02-20 16:40:57 DAC84

文本出现在图像悬停与系列中的图像

回答

相关问题