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;
}

• Method 2: See [Pure CSS Image Hover]