Creating a CSS Rollover

In this tutorial we are going to teach you how to make a simple CSS rollover, a bit like the ones on the BBC iPlayer.

Firstly you need to create an image with the normal state and the rollover state, here is the image I created.

Now that we have an image we need to code the CSS, here is the code I used:

                .rollover {
		width: 374px;
		height: 144px;
		background-image: url(rollover.jpg);
		background-position: top;
		font-family: Arial, Helvetica;
		float: left;
		}
 
		.rollover a {
		color: #fff;
		width: 374px;
		height: 144px;
		display: block;
		text-decoration: none;
		}
 
		.rollover a:hover {
		background-image: url(rollover.jpg);
		background-position: 0px 144px;
		}
 
		.rollover a span {
		display: none;
		width: 364px;
		padding: 5px;
		}
 
		.rollover a:hover span {
		display: block;
		}

What this code does is create a class with the background being the image I created and then the size of the class half the height of the image I created and the full width. The class then displays the top of the half image normally and then when rolled over it displays the bottom half and any text we put in the span.

Now lets take a look at the html to match this.

<div class="rollover"><a title="example titles" href="http://www.example.co.uk/">
<span>
Example Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed at est.
</span>
</a></div>

This code has the div class to start and then inside that is a link with a title, and finally inside that is the span with text inside that will be displayed on top of the image when rolled over.

If you want you can just copy the code from the rollover example I made using the code above. You can also use the image I used by just right clicking and downloading from above.

If you enjoyed this post you might enjoy these:

2 Comments to “Creating a CSS Rollover”

#1 Posted by amardiorn (28.02.09 at 01:14 )

Thank you!

#2 Posted by rochelledancel (26.01.10 at 13:45 )

Simple but always super useful – thanks!