Silhouette Fadeins | CSS-Tricks

 

Silhouette Fadeins

Posted on: 12/9/2009   By: Chris Coyier 79 Comments

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.

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

});

Silhouette Fadeins | CSS-Tricks

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s