Over the years I have seen many ways of creating a rollover image. Many people still choose to use Javascript, but I personally try to avoid this as it is messy, bloats out your coding and may not work if the user of the website has Javascript turned off.

So the first step is to actually create or edit your image/graphic. So you have image 1, and when someone rolls their mouse over it you want them to see image 2.

Image 1
Image 2

Now we have our image/s, we need to put them into one single file one below the other. This is a very basic version of a sprite. You could perform this image rollover with two seperate images, but when the user rolls over the image it has to load the second one, so there is a split second of white space which does not look good!

So this is our basic sprite:

Now we have this, it is time to put in place the HTML and CSS. I have presumed that this will be used on buttons or links, but you can do this on a div or span etc…

HTML

<a href="#" class="rollover-image"></a> 

CSS


a.rollover-image {display:block;width:340px;height:90px;background:url(http://images.thewebtaylor.co.uk/articles/rollover-image-op.png) top;}<br />

a.rollover-image:hover {display:block;width:340px;height:90px;background:url(http://images.thewebtaylor.co.uk/articles/rollover-image-op.png) bottom;}

And that’s it! Notice on the :hover state of the button the background position is set to bottom, so when the user rolls their mouse over the button they will see the bottom part of our basic sprite image, it’s as easy as that!

See it in action

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358