CSS Image Rollover

The CSS method uses an image sprite to load all the rollover effects as a single image and then we use CSS to do the transition. To create the image sprite just create a single image containing image/button and rollover image/button right next to it (side by side).
Once you have your image sprite you just need the HTML and CSS code:

CSS Code:

a.rollover {
	display: block;
	width: 150px;
	height: 44px;
	text-decoration: none;
	background: url("image.jpg");
	}

a.rollover:hover {
	background-position: -150px 0;
	}

HTML Code:

<a href="#" class="rollover" title="Image rollover"></a>