Create a rollover image using css image sprites

• Published by webdevtuts
• Posted on July 4, 2010
• 12 Comments

If you’re new to web design then you might think rollover images can only be done with javascript considering you’re using a WYSIWYG editor. Well not today. In this tutorial I will teach you how you can create a css rollover image with ease. After today you’ll have this technique mastered.

Things you need

• CSS Image

The HTML

When creating rollover images/ css image sprites(Same things) all that is needed in the HTML are the div tags. We used the div tag to define the rollover image later in the css file. So inside of your newly open HTML document create a new div.

<div id="image-sprite"></div><!--end image-sprite-->

The CSS

The CSS is the most important part of creating rollover images because this is where we tell our HTML document to look for the styling of our images. So you’ve downloaded the example image that I’ve created for you all to use while during this tutorial. So as you can see we have an image that is 336px in height x296px in width. The width doesn’t really matter considering they’re are the same. The height is what we care about. So earlier I created two separate images in Photoshop. One of the images equal 168px and height. So I created 2 images and put them together which is how we got the height of 336px(168+168=336).

So lets style of rollover images. Copy the css code below in I will explain it.

#image-sprite {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
}

So above I have called the HTML div tag using css. Then I called for the css to grab the background image. The trick to the css rollover image is when you define the height you only put the height of one image. So the height of one image was 168px and the width like I said before doesn’t really matter because they’re both the same.

The Rollover Effect

Now it’s time to create our rollover effect. Copy the code below and I will explain it.

#image-sprite:hover {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
	background-position:0 -168px;
}

So I applied a hover effect to our css file which tells the HTML document that when ever someone hovers over it to change the image. Everything is the same as our first div except I used the css tag background-position: to change images. The first zero in the background-position tag tells the css to move left or right and we did not want that because are images are stacked vertical. The right numeral -168px tells the the css to move up or down. I told the css to move down -168px which created our rollover effect. Now you’re all done.

There are many ways you can create css rollover images. The technique I showed you guys today is the very simple but can be used to create very
complex rollover images. I hoped you learned something from this tutorial today.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts