Create a fading magnifying glass overlay on image hover with jQuery and CSS3

A common method for setting up a quick image gallery on a website is to have small thumnbnail images which when clicked on pop open larger versions of the image (using a script like Fancybox). It’s a good idea to have some sort of effect on the smaller thumbnail images when they are hovered over to make it more user friendly (in the same way you might change the color of a text link when hovered over).

One simple method is to put a colored border around the image with CSS and change the color of the border when hovered over. Another more exciting option is to apply a background shadow behind the image with CSS3 when hovered over. I’ve used both of these methods on multiple websites, but wanted a more exciting solution.

The Idea

What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.

The Solution

Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to dispaly block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. 

By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% (or whatever you want to use for your project). One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.

jQuery Method

The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:

<a class="image" href="#">

 <span class="roll" ></span>
 <img class="imgborder" alt="" src="images/pic.jpg">
</a>

Here is the CSS for this method:

span.roll {
 background:url(images/mag.png) center center no-repeat #000;
 height: 346px;
 position: absolute;
 width: 347px;

 -moz-box-sh
 z-index: 10;
 -webkit-box-shadow: 0px 0px 4px #000
;adow: 0px 0px 4px  #000;
 box-shadow: 0px 0px 4px  #000;
}
And the jQuery:

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");
er(function () {
// ON MOUSE OVER
$(".roll").ho
v
// SET OPACITY TO 70%

opacity: .7
}, "slow");
$(this).stop().animate(
{
},
// ON MOUSE OUT
function () {
stop().animate({
opacity: 
// SET OPACITY BACK TO 50%
$(this)
.0
}, "slow");
});
});
CSS3 Method
With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:
<a class="image"  href="#">
 <span class="rollover" ></span>
 <img class="imgborder" alt="" src="images/pic2.jpg">
</a>
Here’s the CSS, where all the magic happens:

span.rollover {
 opacity: 1;
n-duration: 1s;
 -moz-transi
 -o-transiti
otion-duration: 1s;
 -webkit-transform 1s;
 background:url(ima
 -webkit-transition
:ges/mag.png) center center no-repeat #000;
 cursor: pointer;
10;
 opacity: 0
 height: 346px;
 width: 347px;
 position: absolute;
 z-index:
 ;
}
span.rollover:hover {
 opacity: .7;
 -o-transition-duration: 1s;
1s;
 -webkit-box-shadow: 0px 0
 -moz-transition-duration: 1s;
 -webkit-transition: -webkit-transform
 px 4px #000;
 -moz-box-shadow: 0px 0px 4px #000;
 box-shadow: 0px 0px 4px #000;
}