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

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

我正在使用Bootstrap和mashise，因此原始图像的HTML如下所示：

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

jQuery

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

请注意，我刚刚在这里编写了代码，还没有测试，因为我想问一下是否有可能使用CSS作为阴影效果，而不是交换图像源

---

此外，如果有人能就标题和按钮提出更好的建议，我将非常乐意尝试。现在我想隐藏div并将其放置在图像底部。

使用

：悬停
。如果CSS可以做任何事情，不要求助于JavaScript

例如：

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

理想情况下，应该通过设置
背景位置
为图标、标志和/或任何“较小图像”使用CSS精灵

更多信息。
解决隐藏字幕的纯CSS方法：

.item img + div {
    display: none;
}

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

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


更改图像的来源类似于：

.item img + div {
    display: none;
}

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

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

HTML:

我认为你可以通过CSS单独实现这一点
：hover
？@Roberrrt你说得对，我可以将它与
背景：url（'source-of-image.png'）
一起使用，然后就不需要jQuery了。我会尽量减少使用Javascript进行这种编码。让我总结一些伪代码，让您上路。如果您要使用：hover with，请使用图像/CSS精灵。精灵适用于图标、箭头、边框图像等常规项目。但我想象OP使用jpg作为投资组合项目。尽管如此，精灵还是很酷的！是的，你说得对。我没有注意到图像名称。：）已编辑。我没有尝试过那么多CSS精灵，但我可以在按钮图像上使用它（他也会有一个悬停），谢谢@stormec56。祝你好运。：）旁注：这在移动设备上不起作用。除了
：hover
之外，您还应该添加
：focus
和
：active
状态谢谢您，我现在就这样组织它：D
<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>

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