Demo:
(only use one of the CSS methods below)
CSS Sprites (New Method)
.hov{display:block;width:245px;height:195px;background:url(images/hover.png)}
.hov:hover{background-position:0 -195px}For this to work, simply stack the normal state image on top of your hover image making one image. They should be exactly the same size and stacked perfectly on top of each other. So, in this example the image would be 245×390 pixels.
CSS (Old Method)
.hov{display:block;width:245px;height:195px;background:url(images/hover1.png)}
.hov:hover{display:block;width:245px; height:195px;background:url(images/hover2.png)}Change the background URL to your image’s location and adjust the width and height accordingly.
HTML
<a href="#" class="hov"></a>Change # to whichever URL you wish.
Avoid Flicker on Image Rollover (Only Necessary for Old Method)
This happens because the second image only loads opon mouseover/hover. We can avoid this by preloading the images(s):
CSS
.preload{display:none}HTML
<img src="images/image2.png" alt="preload" width="0" height="0" class="preload" />This will preload the images without showing them or messing up your design. Use this method to preload all secondary images (the images to be seen on rollover). This is a much more reliable and lightweight method than the JavaScript alternative.
That’s it. There is certainly more style and techniques you can add, but this is the most minimal way to create a rollover image effect. If it’s possible to get any simpler, let me know in the comments below.