Fancy Hover Effect with jQuery

Very cool hover effect

 

HTML

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 );

});

Download: http://www.htmldrive.net/items/download/63

Leave a comment