Demo:

Code:

CSS

.hov{
display:block;
width:245px;
height:195px;
background:url(‘images/image1.png’)}

.hov:hover{
display:block;
width:245px;
height:195px;
background:url(‘images/image2.png’)}

Change the background URL to your image locations and adjust the width and height appropriately.

XHTML

<a href="#" class="hov"></a>

Change # to whichever URL you wish.

Avoid Flicker on Image Rollover

This happens because the 2nd image only loads on mouseover/hover. We can avoid this by preloading the images(s) and this can still be done non-JavaScript with CSS:

CSS

.preload{display:none}

XHTML

<img src="images/image2.png" alt="preload" width="0px" height="0px" 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 simpler, let me know.

Enjoy.

Thanks, Bryan