All right, this tutorial is short and sweet but rather effective.
First you will need two different images to transition between; however, in CSS's case put them side-by-side and save it as the same single image , and it should be uploaded along with the rest of your site in the same directory as the html file.

<a href="link location" class="rollover" title="link"><span class="displace">Link</span></a>


This creates a link that if CSS is enabled will make the rollover button, and if CSS is disabled, then it creates a very simple link to the same place.


a.rollover {
display: block;
width: width/2px;
height: height/2px;
text-decoration: none;
background: url("img1.png");
}

a.rollover:hover {
background-position: -150px 0;
}

.displace {
position: absolute;
Wherever you want the image
}


All we do is we set the button to only display the first half of the button until the user rolls over it with the mouse and then it displays only the second half.