Articles

Fancy Hover Effect

28 Sep 2009 / 35 comments

You can see the final result at this page, and you can download the complete source code with examples from here.

HTML

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

<div id="featured-wrap">
	<div id="featured-content">
		<a href="http://www.jardinesdelte.com/"><img alt="Jardines" src="2_s.jpg" /></a>
		<a href="http://101.es/"><img alt="101 - Cientouno" src="1_s.jpg" /></a>
		<a href="http://www.missionbicycle.com/"><img alt="Mission Bicycle Company" src="3_s.jpg" /></a><a href="http://betyourfollowers.com/"><img alt="Bet Your Followers" src="5_s.jpg" /></a>
	</div>
	<div id="featured-preview">
		<img alt="Jardines" src="2_b.jpg" />
		<img alt="101 - Cientouno" src="1_b.jpg" />
		<img alt="Mission Bicycle Company" src="3_b.jpg" />
		<img alt="Bet Your Followers" src="5_b.jpg" />
	</div>
	<div id="featured-overlay">
		<div></div><div></div><div></div><div></div>
	</div>
</div>

Here we have 3 layers -

• featured-content - contains thumbnails
• featured-preview - contains preview images
• featured-overlay - invisible container positioned above previous layers; will be used to handle hover events

jQuery

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.

function showPreview(event) {
	$("#featured-preview").show();
};
 
function hidePreview(event) {
	$("#featured-preview").hide();
};
 
function updatePreview(index) {
	$("#featured-preview img").hide().eq( index ).show();
};
 
function movePreview(event) {
	var content_position = $("#featured-content").offset();
 
	$("#featured-preview").css("left", event.pageX - content_position.left - 160);
};

First we have some helper functions. showPreview/hidePreview are fired when mouse is moved into/away from output container and movePreview is fired while mouse is moved over. The preview image is updated via updatePreview.

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

$(document).ready(function() {
	var content_els		= $("#featured-content a");
	var overlay_wrap	= $("#featured-overlay");
	var overlay_els		= $("div", overlay_wrap)
 
	overlay_els
		.css('opacity', 0)
		.mousemove( movePreview )
		.mouseenter(function() {
			updatePreview( overlay_els.index( this ) );
		})
		.click(function() {
			window.location.href = content_els.eq( overlay_els.index( this ) ).attr("href");
		})
		.show();
 
	overlay_wrap
		.mouseenter( showPreview )
		.mouseleave( hidePreview );
 
});

You can check out the demonstration and the code. :) enjoy.

View Demo - Download

Bookmark and Share this Article

User Comments

1. 

   Kris Sauquillo September 30th

   Very nice! I'm surprised I haven't seen an effect like this one before. Good job.
2. 

   artisare October 2nd

   Sweet! Nice job man!
3. 

   Frankie October 14th

   Very nice. Good job. fresh, new effect.
4. 

   designer replica handbag September 3rd

   'm surprised I haven't seen an effect like this one before. Good job.'m surprised I haven't seen an effect like this one before. Good job.
5. 

   christmas gift exchange ideas September 4th

   wow all those garments are so amazing and fabulous I don't come to your blog as often as I would like, but whenever I do I see some really amazing things keep up the good work! =)
6. 

   liposuction dallas September 4th

   Simply wanted to say good weblog, that I learn it every now and then...
7. 

   liposuction chicago September 4th

   It's so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked. Thanks!
8. 

   liposuction recovery September 4th

   Your blog caught my eye. Thanks for sharing this information.
9. 

   liposuction surgeons September 4th

   Saw your Blog bookmarked on Reddit.I really enjoy your blog and marketing tactic. Investigate out my Farmville Guidebook in the event you get a moment.