🥇 Converta uma imagem em tons de cinza usando apenas CSS

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

Related Posts