Question

我想在我的投资组合元素上实现以下悬停效果 - link with before and after

我正在使用带有Masonry的Bootstrap，因此原始图像的HTML看起来像这样：

<div class="col-md-4 col-sm-6 item">
    <img src="img/portfolio3.jpg">
</div>

我可以使用jQuery .hover()函数来交换图像源，而且我正在考虑标题和按钮，以便在悬停事件之前隐藏两个元素，如下所示：

HTML

<div class="col-md-4 col-sm-6 item">
    <img src="img/portfolio3.jpg">
    <div class="captions">
        <h3>AncaGV Blog</h3>
        <button></button>
    </div>  
</div>

的jQuery

$('.item img').hover(function(){
    $(this).attr('src','portfolio3b.jpg');
    $(this).next().slideToggle('slow');
});

请注意，我只是在这里编写代码，尚未经过测试，因为我想询问是否有可能使用CSS进行阴影效果而不是交换图像源。

另外，如果有人可以建议关于标题和按钮的更好的方法，我会非常乐意尝试一下。现在我想隐藏div并将其放在图像的底部。

Answer 1

使用:hover。如果CSS可以完成任何工作，请不要使用JavaScript。

例如：

img {
    background: url("img.png");
}

理想情况下，您应通过设置background-position，将CSS精灵用于图标，标记和/或任何＆＃34;较小的图像＆＃34 ;.

更多关于CSS Sprites。

Answer 2

解决隐藏字幕的纯CSS方式：

.item img + div {
    display: none;
}

.item img:hover + div {
    display: block;
}

.item:hover img + div {
    display: block;
}

Codepen example

更改图片来源类似于：

HTML：

<div class="col-md-4 col-sm-6 item">
    <div id="portfolio-item-3"></div>
    <div class="captions">
        <h3>AncaGV Blog</h3>
        <button>Hi!</button>
    </div>  
</div>

CSS：

#portfolio-item-1 {
    background-image: url('img.png');
}
#portfolio-item-1:hover {
    background-image: url('img-hover.png');
}

什么用作图像的悬停效果？

2 个答案: