Steve Taylor photo

jQuery image hover effect

I’ve just been trying to replicate a certain effect I saw in Flash image gallery with jQuery. When you hover over a thumbnail, it “glows” a little—not an “outer glow”, but the whole image just becomes brighter for a moment then the brightness fades back.

A very simple effect, and in the end doing it in jQuery was pretty simple, but I thought I’d document it. My technique has one caveat: it relies on the background being white, because it basically achieves the effect by temporarily reducing the opacity of the thumbnail image. If you have a background colour different from the colour you want the image to “glow” with, I’m sure there’s a way. You could probably use positioning to put a blank white image behind the thumbnail, and use this technique as-is.

Anyway, here’s some typical HTML:

<div class="thumbnail">
	<a href="fullsize.html"><img src="thumb.jpg" alt="thumbnail" /></a>
</div>

And here’s the important stuff, the jQuery:

jQuery( document ).ready( function($) {
	$( ".thumbnail a" ).mouseover( function() {
		$( this ).children( "img" ).stop( true, true ).animate({
			opacity: 0.6
		}, 200, "swing", function() {
			$( this ).animate({
				opacity: 1
			}, 400 );
		});
	});
});

The stop() function in line 3 clears any queued-up effects when the mouse goes over. This stops things looking weird when someone goes crazy fast with their mouse.

The first opacity setting is for the “glow” to come through from the white background. If you want a brighter glow, make this value lower. The 200 just after is the number of milliseconds it’ll take for it to get to that opacity.

Then there’s the callback function which restores the original opacity. Again, the 400 is the timing value. Adjust this and the 200 to change the “rhythm” of the glow effect.

Have fun with it!

3 comments

Comments are closed.