Image rollover

CSS code

a#icon:link, a#icon:visited {
display: block;
width: 151px;
height: 322px;
margin: 2em auto;
padding: 0;
border: 2px solid #999;
background: url(author2.jpg) no-repeat 0 0;
}

a#icon img {
display: block;
width: 151px;
height: 322px;
border: none;
}

a#icon:hover img {display: none;}
a#icon:hover {border: 2px solid #fc0;}
a#icon:focus {outline-style: none;}

Comments

This example works in Firefox, Opera and Internet Explorer 6. First we put an image as background of the <a> element. Then we put an <img> element inside the link. With the declaration 'display: none' on :hover, we let the background image shine through. The declaration in blue is used to prevent Firefox from outlining the link. Thanks to Giuseppe Benvenuto for the inspiration.

PS. That's me in the picture.

Back to November 2006