Monthly Archives: January 2009

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.

Mike asks the CSS Guy about a scrolling trick with background images

Mike writes:

Check this out: http://econsultancy.com/reports.

Scroll up/down… whaaaaat? :) How was this done?

Answer: fixed background images. Let’s look at some examples.

Images

For the basic effect, start with two same sized images, with a slight difference. For my example, I chose this color image and made second version of it in black and white.

The images don’t have to be the same size, but that definitely makes it easier.

The markup

Each image will need it’s only container. I’ve used a header div and a content div.

<html>
  <head>
    ... 
  </head>
  <body>
    <div class="header">
      ...
    </div>
    <div class="content">
      ...
    </div>
  </body>
</html>

The CSS

Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set to fixed.

...
.header {
  padding:40px 40px 40px 300px;
  background: #dbded1 url(images/cuckoo_color.jpg) no-repeat 20px 20px fixed;
}
...
.content {
  padding:10px 40px 10px 300px;
  background: transparent url(images/cuckoo_bw.jpg) no-repeat 20px 20px fixed;
}
...

I’ve kept this example basic. If your browser is wide enough by default, the two images are already seen at the same time. That’s ok just for purposes of illustration.

And knowing this can be done, there’s no reason it has be limited to just two images.

So what can be done with it?

This ‘effect’ isn’t inherently bad or annoying, but it is noticeable enough that I’d rather it exist for a reason – where the effect adds some value to the content. Otherwise, like in the case of econsultancy, it just seems like an excuse to show both the home and away jersey, as if someone couldn’t decide which logo to go with, so they came up with a way to use both.

I took a stab at it. Maybe a paper shredder web page?

Or maybe not…

If you’ve seen technique this used effectively, let me know in the comments.

Jan 14, 2009: Some readers of reddit mention that the following sites that have used fixed background images to achieve a nice effect:

  • Eric Meyer’s complexspiral demo uses fixed background images to fake transparency
  • Bryan Katzel’s We Bleed Design portfolio. (Click the ‘play’ link at the top, sit back, and enjoy).

This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


It’s been used for years here: http://timpelen.com/?car=jalpa

This was also done to great effect in the CSS Zen Garden:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css