Image Rollover with CSS

If you’re a novice web designer or perhaps you haven’t had the time to brush up on CSS in the past few years and prefer of designing websites directly in a WYSIWYG editor such as Dreamweaver, then I’m sure you’re familiar with creating rollovers. I bet you’re also aware of the bulky javascript that ends up generating in your HTML file.

The image at left shows a completely javascript free rollover. It’s accomplished with just a few lines of code, 1 image containing both the normal and the hover state and a single pixel transparent GIF file which will act as place holder for the effect.

Here’s how it’s done:

Lets begin by creating the image that we wish to apply a rollover effect to. In the example at top, I cropped out an image of my dog, Peanut. In order to simplify this tutorial, lets use a simpler, smaller sized image.

I created a prepared image at left, which you can right-click on and save for your own use. Note how the image is actually duplicated and stacked one on top of the other. This is because we will use a CSS trick to mask the top portion of the image as it loads on our page and reveal the other portion of the image as we hover over it.

The hover effect is created by the following CSS:

.check {
	background-image:url(check.png);
	background-position: 0px 0px;
	width: 87px;
	height: 75px;
	}

.check:hover {
	background-image:url(check.png);
	background-position: 0px -75px;
	width: 87px;
	height: 75px;
	}

Our full image measures 87px wide by 150px tall. We’re cropping it at 75px tall, which is exactly half of our image height, thus revealing only the top portion of the image (the grey check). For the hover effect to work properly, we are telling the background image to position itself up with a value of -75px, which creates the illusion of a rollover effect.

The HTML looks like the following:

<div class="check">
<img src="check-dot.gif" width="87" height="75" />
</div>

The image that we’re placing in the HTML “check-dot.gif” is an additional image we need to create measuring 1px tall/wide. It’s important that this image is saved as a transparent file, preferably a GIF file. We wrap that image between the “check” class that we’ve defined in the CSS and we’re done. The final effect is shown at left.