HTML + CSS Image Rollover Effect

To make an html and css rollover effect, the logic behind it is quite simple..

In your html code, you need to place a DIV tag inside a hyperlink. E.g

<a href=”test.html”><div class=”roll”></div></a>

In your css code: you would use the a, a:visited and a:hover to manipulate the Image Rollover. E.g

a .roll, a:visited .roll {





/*The code below is what would trigger the 2nd hover image to appear*/

a:hover .roll {





And that’s the basic technique behind it.. try it and play with the code to understand it better.

Gulshan Yashveer Beejan

Gulshan holds a BSc(Hons) Computer Science with Distributed systems from the City University of London. He is currently working at DSOGroup(Mauritius) as a Linux Administrator on SaaS Solutions. More about Gulshan

Leave a Reply

Your email address will not be published. Required fields are marked *