If you have never tried this before, it is an excellent implementation for buttons and images. What I am teaching here? We are going to learn how to fade an image to its greyscale equivalent by using CSS sprites and JQuery.
Before we begin check out the working example. Now, lets see the HTML part of the code,
Each list will contain an image which is nested within a <span> tag. The <span> tag will be used to crop the image to only show its default state.
Now the CSS part. It is pretty easy to understand now that you know the HTML part,
Now comes the most important part, JQuery. That is, the animation.
If you read all the comments properly, you will know whats happening! Now go and show off your newly acquired skills! 
Before we begin check out the working example. Now, lets see the HTML part of the code,
HTML Code:
<ul class="gallery"> <li> <a href="#" class="thumb"><span><im g src="image" alt="" /></span></a> <!-- This is the normal image --> </li> </ul>
Now the CSS part. It is pretty easy to understand now that you know the HTML part,
Code:
ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
width: 204px; /*--Width of image--*/
height: 182px; /*--Height of image--*/
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}
Code:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.gallery li").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Now we'll assume that the grayscale version of the image has a 'g' at the starting. So lets modify the thumbOver variable
thumbOver='g'+thumbOver;
//Set a background image(thumbOver,i.e., the grayscale image) on the <a> tag - Set position to bottom
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fadeTo('normal', 1).show();
});
});
</script>
What a shame, even asking for the members to vote for this article.