使用jquery画廊将图像放在悬停的另一图像上

Question

I have a gallery and I want to overlay each image on hover with a transparent image that has a zoom icon. How can I accomplish this in the most efficient way with jQuery? All gallery images are in an <a></a> tag like below:

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

I looked for answers but I couldn't find any that resolve my problem. If you know a way to accomplish this without jQuery that would be fine too.

Answer 1

There's no jQuery needed here - you can use CSS alone to achieve what you require. You can use the :before pseudo class to add content to the a element which is shown on :hover . Try this:

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

Note that I used FontAwesome to add a magnifying glass icon, but you could just as easily use any image you need and set the background-image property instead.