Silhouette Fadeins

Chris Coyier //

Some friends of mine's band recently went through a small member lineup change. They needed to replace the photo on their homepage. I thought it might be fun to do something slightly interactive there. We went with silhouettes of the band members, which fade into real photographs upon rollover.

There are probably quite a few ways to do this... This one just popped into my head and I went with it. The idea is to have a div with the silhouettes as a background image. Then have four images within that div, all of the exact same size, with each band member highlighted. These images are hidden by default. Then have four absolutely positioned region sitting on top in the div. These are the rollover area / links. In the jQuery, we watch hover events on them, and fade in the appropriate image.

HTML

Like I mentioned, just a div with four images inside it and four rollover areas. All with unique ID's and common class names.

<div id="home-photos-box">
                    
    <a id="aller" href="#aller" class="home-roll-box"></a>
    <a id="neil" href="#neil" class="home-roll-box"></a>
    <a id="aaron" href="#aaron" class="home-roll-box"></a>
    <a id="scott" href="#scott" class="home-roll-box"></a>
    
    <img src="images/guys-aller.jpg" alt="" id="image-aller" class="single-guy" />
    <img src="images/guys-neil.jpg" alt="" id="image-neil" class="single-guy" />
    <img src="images/guys-aaron.jpg" alt="" id="image-aaron" class="single-guy" />
    <img src="images/guys-scott.jpg" alt="" id="image-scott" class="single-guy" />
            
</div>

CSS

Commonalities covered by class names (e.g. position style), unique things covered by the ID's (specific left position).

#home-photos-box { float: left; width: 352px; background: url(../images/guys-allblack.png) no-repeat; padding: 334px 0 0 0; position: relative; }
#aller { left: 0; }
#neil { left: 25%; }
#aaron { left: 50%; }
#scott { left: 75%; }
.home-roll-box { position: absolute; z-index: 1000; display: block;  height: 334px; top: 0; width: 25%; }
.single-guy { position: absolute; top: 0; left: 0; display: none; opacity: 0; }

jQuery

Watch for hovers, when they happen, pull the ID of the hover area, which corresponds to the ID of the image, and fade it in. We make sure to use .stop() here to prevent queuing up of animations and we're using an opacity setting instead of .fadeToggle() which likes to do partial-fades when moused in and out too quickly.

$(function() {

    var name = "";

    $(".home-roll-box").hover(function() {
        name = $(this).attr("id");
        $("#image-"+name).stop().show().animate({ opacity: 1 });
    }, function() {
        name = $(this).attr("id");
        $("#image-"+name).stop().animate({ opacity: 0 });
    });

});

View Demo   Download Files