Convert an image to grayscale using only CSS

Webkit supports filters (been quite some time actually) and it is possible to convert images to greyscale using only CSS. There are other options that use javascript. However, this simple approach works for me.

.desaturate{
transition-duration: 1000ms;
}

.desaturate.active{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

I can then bind the mouseover event on an image to add the desaturate class to make it grayscale.

$('.img').bind('mouseenter', function() {
    $(this).addClass('desaturate');
});

You can refer to this list for cross browser support