How do they do this image overlay? (audiofly.com)

design

#1

Together, my colleague and I have a fair bit of Javascript, and CSS experience.

Our client has told us she really likes the audiofly.com way the images (headphones) pop-up when you roll over them. (take a look at the site – this is not just a simple image swap.)

I can tell that iframes is part of the way they work the magic.

But how do they actually do the overlay of the one image on top of the other?

Any clues?

www.audiofly.com

Thanks.

–Sam


#2

page source reveals this clue:

<div class="box"><a class="boxHover" href="/headphones/af78-detail.html"><span id="box_af78">&nbsp;</span><span class="boxHoverImageAF78">&nbsp;</span></a></div>

#3

Plus the magic CSS:

a.boxHover:hover .boxHoverImageAF78 { background: transparent url(../img/hover-af78.png) no-repeat; z-index: 600; }

I haven’t seen a descendant selector after a pseudo-class selector before, but it makes sense. Pretty slick.