How to make a rollover image link using CSS

A rollover is an image that changes when a cursor is rolled over it. This is also known as a mouseover effect. Today I’m going to show you how to make link out of a rollover using CSS and HTML.

Since rollovers are basically two images that change as a cursor rolls over it, I need to find my two images. For this example, I want to give a logo that I created for a Halloween site the rollover effect. So, I made two versions of the logo.

The first version of the logo is as I want it to look when there is no mouse over it.

The second image is my rollover effect. As you can see, Batty is moved to a different position and the font is much bolder.

The Rollover CSS

Here’s my code, you can paste it into your style sheet. Be sure to change the width, height and file paths to match your own.

a.logo_rollover:link, .logo_rollover{
	width:456px;
	height:72px;
	display:block;
	background-image:url(Logo2.png);
}
a.logo_rollover:hover{
	width:456px;
	height:72px;
	display:block;
	background-image:url(Logo1.png);
}

In my style sheet I defined a class for my rollover effects using pseudo-classes for the link element, then I added to each of them the corresponding logo as a background.

The HTML

To call your rollover, place a link with the class logo_rollover where you would like it to appear on your site. You can paste the example below, be sure to change the URL to meet your needs.

<a class="logo_rollover" href="http://halloweenhappiness.com/"></a>

Here’s the effect:

You’ll notice that when you first roll over the above logo, there’s a blink. That blink is the second image loading, and it only does it the first time a user rolls over it. Why? Because the second image doesn’t load when your page does, it loads once as it is being rolled over.