Cross-Browser Image Grayscale

Grayscale effect on images with CSS. all major browsers are compatible.

HTML

<div><a href="http://www.flickr.com/photos/thecrowleys/8464961316/" title="Forth Road bridge by SparklyOne, on Flickr"><img class="grayscale" src="http://farm9.staticflickr.com/8380/8464961316_bff336e8b1.jpg" width="480" height="246" alt="Forth Road bridge"></a></div>

CSS

body{
    padding: 50px 10px;
}
img{
    border: 10px solid #ccc;
    box-shadow: 0px 0px 1px #555;
}
img.grayscale{
    
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    
}

JavaScript

$('img').hover(function(){
    $(this).toggleClass("grayscale")
    //alert('hello');
});