Image Rollovers with CSS
If you're new here, you may want to subscribe to my RSS feed.
Without the hassle of annoying javascripts, we will create an image rollover for a button. This button uses something called the “Slide door Technique”. Which is very efficient for anyone trying to make their site load faster, and keep everything clean and easy.
For this tutorial we will be using the follow image for a RSS Feeds button:
Notice how it is only one image, with both Off states, and Hover states.
Lets get started with the code, below is the CSS we will be using.
Notice for the hover, we change the backgrounds position to -44px, this moves the background so it shows only the hover state when hovered on. Now for the HTML code.
In this HTML code we simply apply the class “button” to the anchor. We use a span tag inside of the anchors so that we can hide the text.
Thats it! a simple image rollover uses a couple lines of simple CSS, this is very helpful for layouts with navigation that requires image and such. You can view the demo here, and download all the files used here, thanks for reading!
(12 votes, average: 4.58 out of 5)
Loading ...
9 Comments
cherries on January 11, 2007
I never even thought of using one image for this :0
admin on January 11, 2007
it’s also called the “Sliding Door” technique, very useful.
Ian on January 23, 2007
If I added a third version of the image, how could I make it so that it would show that image when you were on the page it the image was linked to. Say I have a nav and I’m on the homepage. How would I make the home image in the nav be say green rather than the gray color all the other images are. Thanks in advanced for any help.
Scott on January 24, 2007
You could make a class or an ID which would be the same as the a:hover stuff.
nick99 on January 25, 2007
very good, thank you for the image rollover
Julian on March 18, 2008
Brilliantly simple and effective.
how to make an image rollover on May 8, 2008
[…] lines CSS. Great for any designers or developers wanting to jump into making xhtml/css layouts.http://nowcss.com/links/image-rollover-with-cssRollover ButtonsAgain the first step is to design your images and rollovers in Fireworks. make sure […]
Garin on August 4, 2008
Hey used this tut to make my own rollover work out for me. Very simple and effective, fixed my problems. Thanks.
Kyle on November 19, 2008
Very nice tutorial, I’ve read a few others about the sliding door technique and none were as clear and straight to the point as this one.
Excellent!