Cross browser CSS3 image gray-scale and colorize on hover.

colorize_image.css

body{
    padding: 50px 10px;
}
img{
    border: 10px solid #ccc;
    box-shadow: 0px 0px 1px #555;
}
img.grayscale{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    
}

colorize_image.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>

colorize_image.js

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