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