Submit your widget

Fancy Hover Effect with jQuery

Created 13 years ago   Views 19906   downloads 2554    Author jqueryglobe
Fancy Hover Effect with jQuery
View DemoDownload
Share |

Very cool hover effect



<div id="featured-wrap">
 <div id="featured-content">
  <a href=""><img alt="Jardines" src="2_s.jpg" /></a>
  <a href=""><img alt="101 - Cientouno" src="1_s.jpg" /></a>
  <a href=""><img alt="Mission Bicycle Company" src="3_s.jpg" /></a><a href=""><img alt="Bet Your Followers" src="5_s.jpg" /></a>
 <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 id="featured-overlay">

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



function showPreview(event) {
function hidePreview(event) {
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)
  .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");
  .mouseenter( showPreview )
  .mouseleave( hidePreview );