How to Make CSS-Based Image Rollovers
So you want to make rollovers and not have to deal with messy javascript? Good choice, CSS can do this for you. We’re going to show the top 50% of an image, and when you put your mouse over it, we’ll change to the bottom 50%. This is better than traditional rollovers in that we’re not calling a 2nd external image every time someone rolls over it.
You’ll need to make an image with twice the height of the original and have the rollover on the bottom half. Here’s the image I’ll work with in this example:
Once you have your rollover ready, we’ll start by pasting the following into your CSS stylesheet. Our image above is 200×100 pixels so we’ll define those dimensions below, except 1/2 the height, so 50px. Change the background image URL to where you uploaded it on your webserver.
.button1 a { display: block; width: 200px; height: 50px; background: url(http://www.metatitan.com/images/rollover-example.gif) no-repeat top left;}
.button1 a:hover { background-position: bottom left;}
Save your stylesheet and insert the following code wherever you want your rollover to appear in your document.
You can implement the basic concept a number of different ways than described above, try it out and see what works best for your project. Our final product will look and function like:
This is a pretty cool idea - I currently use Wordpress for my site, and am beginning to tire of the current them for it so this will be something to remember when I eventually get around to redesigning it. Thanks!
Comment by Alex Fielder — October 19, 2007 @ 4:39 pm
Great idea! Something I am currently implementing right now in an image gallery where the hover state changes the opacity of the thumbnail. Thanks for the tip!
Comment by John — February 26, 2008 @ 9:54 am
Thks, really simple and nice. Thats what I was looking for.
Comment by Maxim — March 23, 2008 @ 11:25 pm
With this tutorial, I have answered my question to my first project… ^_^ Thanks…^_^v
Comment by Mark Labrador — June 18, 2008 @ 4:44 am
I’m currently learning CSS, and I just wanted to say thank you for this… just another reason why CSS is so wonderful.
Comment by Kyle Gallant — August 10, 2008 @ 9:58 pm
You can try this:
<style>
img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}
</style>
<A HREF=”#”>
<img src=”b1.gif” class=”nohover”>
<img src=”b2.gif” class=”hover”>
</A>
Comment by Frank — November 28, 2008 @ 7:17 am