Articles

Fancy Hover Effect

28 Sep 2009 / 312 comments

I was recently asked to help creating very cool hover effect. I played around with it a little bit and come up with solution I would like to share.

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

User Comments

  1. 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. October 14th

    Very nice. Good job. fresh, new effect.

  4. Ruana September 29th

    Very cool! I love it and I'm about to use it for my next website (over in Austria, Europe). The lady is a farmer and this will display her sheep and goats nicely. ;-)) Thanks.

jQueryGlobe

RSS
Email_RSS