将一个图像放在另一个图像上悬停 jquery 用于画廊

Question

我有一个图库，我想用带有缩放图标的透明图像覆盖悬停时的每个图像。如何使用 jQuery 以最有效的方式完成此操作？所有画廊图片都在 <a></a> 标签中，如下所示：

<a href="pictures/gallery/fullHD/1.jpg" target="_blank">
    <img src="pictures/gallery/fullHD/1.jpg" class="gallery_pic"/>
</a>

我寻找答案，但找不到任何可以解决我问题的答案。如果您知道不用 jQuery 即可完成此操作的方法，那也很好。

Answer 1

此处不需要 jQuery - 您可以单独使用 CSS 来实现您的要求。您可以使用 :before 伪 class 将内容添加到 :hover 上显示的 a 元素。试试这个：

a:before {
    position: absolute;
    font:normal normal normal 14px/1 FontAwesome;
    content: "\f002";
    top: 5px;
    left: 5px;
    width: 50px;
    height: 50px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
a:hover:before {
    opacity: 1;
}

Example fiddle

请注意，我使用 FontAwesome 添加放大镜图标，但您可以轻松地使用您需要的任何图像并设置 background-image 属性。

将一个图像放在另一个图像上悬停 jquery 用于画廊

Putting an image over another image on hover with jquery for a gallery

jquery

overlay

image

gallery

hover