O Webkit oferece suporte a filtros ( já faz algum tempo ) e é possível converter imagens em tons de cinza usando apenas CSS. Existem outras opções que usam javascript . No entanto, essa abordagem simples funciona para mim.
.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);
}
Posso então vincular o evento mouseover em uma imagem para adicionar a classe desaturate para torná-la em tons de cinza.
$('.img').bind('mouseenter', function() {
$(this).addClass('desaturate');
});
Você pode consultar esta lista para suporte cruzado de navegadores