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 {

background-image:url(x.jpg);

width:200px;

height:200px;

}

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

a:hover .roll {

background-image:url(xhover.jpg);

width:200px;

height:200px;

}

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

Read More