Estou tentando usar o parametro filter
do CSS, mas em alguns navegadores com o Chrome e IE não está funcionando, já no firefox ele funciona normalmente como o desejado. O código que tenho é esse:
.empresas-marcas ul li a{
-webkit-filter:grayscale(100%) contrast(1000%) opacity(30%);
-moz-filter:grayscale(100%) contrast(100%) opacity(30%);
-ms-filter:grayscale(100%) contrast(100%) opacity(30%);
-o-filter:grayscale(100%) contrast(100%) opacity(30%);
filter:grayscale(100%) contrast(100%) opacity(30%);
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out;
}
.empresas-marcas ul li a:hover{
-webkit-filter:grayscale(0);
-moz-filter:grayscale(0);
-ms-filter:grayscale(0);
-o-filter:grayscale(0);
filter:grayscale(0);
-webkit-transition:all 300ms ease-in-out;
-moz-transition:all 300ms ease-in-out;
-ms-transition:all 300ms ease-in-out;
-o-transition:all 300ms ease-in-out;
transition:all 300ms ease-in-out
}
Esse código deixa a imagem preto e branco e quando passo o mouse sobre a imagem ela fica colorida.
Não sei se tem que adicionar algum javascript auxilar para fazer funcionar, mas precisava arrumar isso urgentemente.