CSS: image swap on mouse over








  • Method 1: Originate from [here]
The HTML code:
<div class="container"><a href="#"><img src="img1.png" /></a>
</div>

The CSS code:
div.container {
    height: 32px;
    width: 32px;
    margin:0;
    padding:0;
    background-image:url("img2.png");
}

div.container a, div.container a:link, div.nav a:visited {
    display:block;
}

div.container img {
    width:100%;
    height:100%;
    border:0;
}

div.container a:hover img {
    visibility:hidden;
}










2 comments: