0

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.

1
  • 1
    Há um erro no seu código. Tem um 1000% na segunda linha.
    – luislhl
    Commented 12/10/2016 às 19:52

2 Respostas 2

0

Segundo o site Can I use, a propriedade filter do css só é suportada no edge, não no Internet Explorer. Além disso, há um errona segunda linha do seu arquivo. Um 1000% que deveria ser 100%.

0

Para aplicar a transição a um "filter" corretamente, você deve passar o novo valor de todos os filtros que foram aplicados e não somente do que deseja alterar.

Por exemplo:

a {

    filter: hue-rotate(45deg) brightness(1.5);

}

a:hover {

    filter: hue-rotate(0deg) brightness(1);

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .