Goofin' with CSS and jQuery

I just put up a site at espositoholdings.com.  I've had the domain for a while now.  I got it on a whim, because I thought it would be kinda funny, the first step in building a massive empire of web properties.  One of my cousins does graphic design as a hobby (he's quite good, really, when he can put the time in), so he whipped up a logo for thing, also because he thought it was kinda funny.  It's this:

So I had this domain and this logo just sitting there.

I had this idea that each of the little squares should hold a logo for one of the "web properties" and it would animate in some way when you moused over it.  A couple of months ago, I can across a neat little effect on Chris Coyier's CSS Tricks site where moving your mouse over a "black" image "reveals" the portion the mouse is over.  Which reminded me of my earlier notion, but it still took me until today to jump in and actually try to get it done.   I started off with the techniques in Chris' article, but it wasn't quite what I wanted.  Let's examine what he did, and how I differed, shall we?

The basics are a set of regions, defined by CSS to have a particular size and position over the image, with jQuery used to catch the mouse hover event over each region and then turn on and off the correct "revealed" image.

Chris' method was to create five different images, one for each "state."  There was the regular "nothing highlighted" image, and since he had four "hot spots," there were four more images, each with three parts black and one revealed.  Since each element in his image was basically the same width, and all lined up horizontally, the CSS placement was really pretty simple.

My Way or the Highway

I didn't really want to create four different versions of my logo (I have only three "hot-spots" rather than the four Chris has), partly out of laziness, partly because I wanted to be able to swap those images out whenever I felt like it. So I set about to define the area above each square in the logo which would be my hotspot.  This was pretty simple to calculate, and a bit of trial-and-error got it looking OK.  Then I created the small (54x54) logos which would appear magically inside their respective squares.  These are PNGs with transparent backgrounds, so they look natural when revealed.

The HTML markup is a dead ripoff of Chris's, as is most of the CSS and jQuery code. But I made a couple of changes.  First, Chris used absolute positioning for his elements, but since they stack next to each other, that wasn't such a big deal, and he could give them each the same basic styling.  Where he had just one selector for those elements:

.home-roll-box { position: absolute; z-index: 1000; display: block;  height: 334px; top: 0; width: 25%; }

I made a generic one, and then picked out each area using the clever Attribute Selector technique (boy, that Chris Coyier is a handy guy!), thus:

.rollover { 
  display: block;
  height: 54px;
  position: absolute; 
  width: 54px; 
  z-index: 1000; 
}
.rollover[id="tcms"] { top: 18px; margin-left: 72px; }
.rollover[id="narchivist"] { top: 74px; margin-left: 18px; }
.rollover[id="openingup"] { top: 128px; margin-left: 72px; }  

That got my rollover areas positioned, but since I have three images to fade in and out in three different locations, and they are all smaller than the main logo image, I couldn't just superimpose them on the main logo.  So a bit more JS does the job:

    $(".rollover").each(function (i) {
      // move the logo into the corresponding rollover area
      var logo = "#" + $(this).attr("id") + "_logo";
      $(logo).css ("top", $(this).css("top"));
      $(logo).css ("margin-left", $(this).css("margin-left"));
      });

This walks through each "rollover" area, grabs it's top-position and left margin, and then applies them to the corresponding image.

I like the results, but of course that's always subjective.  I'm open to other opinions.