How to make a ‘wall of awesome’ with CSS and an animated gif

My coworker Alan sent me a link to moustacheme.com last week. Moustacheme.com has a wall of awesome, which is a gallery of moustachioed photos (perhaps it could be called a “stash of staches”, or a “stache-cache”), and it uses a clever CSS technique for an attention-getting effect on hover.

Let’s recreate it.

The HTML

We want a thumbnail container, with our link inside of it. The thumbnail image is inside the link. The thumbnail containers are at a fixed dimension (thanks to the thumb) and will simply float left and repeat .

So this:

<div class="thumbnail">
  <a href="#">
    <img src="thumb.gif" alt="" />
  </a>
</div>

repeated a few times and put in a container, like so:

<div class="container">
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>
  <div class="thumbnail">...</div>
  ...
</div>

Some basic layout CSS

Right off the bat, I want to layout my thumbs a little better, like a 9×9 grid. So I’ll start with that first.

.container { width: 470px; }
.thumbnail { float:left; }
.thumbnail a img { display:block; border:none; }

Now let’s get awesome.

Awesome CSS

To get awesome, we need to find a nice high-contrast animated gif to assist our hover state. I could use the star blast used on moustacheme.com, but those are cut to the size used on that site, so I think I’ll create my own little animated spiral based on a rough gif I found on the internets.

We set that image as the background of our thumbnail div. The awesomeness is baked into place once the opacity of the thumbnail image is changed on hover.

.container { width: 470px; }
.thumbnail { float:left; background:transparent url(images/spiral.gif) no-repeat 50% 50%; }
.thumbnail a img { display:block; border:none; }
.thumbnail a:hover img {
  opacity: 0.8;
  filter: alpha(opacity = 80); /* for IE */
}

I’m certain this could be done with less markup. For instance, we don’t need a div.thumbnail. Our <a> tag can be the thumbnail – set it to display block and attach the background image to it.

In summary

Ok, so my wall of awesome featuring images from the Men Who Look Like Kenny Rogers web site is not as awesome as moustacheme.com’s wall, but you get the idea.