Fancy Hover Effect with jQuery

Demo
Download

Very cool hover effect

HTML

<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

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.

$(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() {

[removed].href = content_els.eq( overlay_els.index( this ) ).attr("href");

})

.show();

overlay_wrap

.mouseenter( showPreview )

.mouseleave( hidePreview );

});

You might also like