problemas com css no mozila

[bielnick]

Pessoal, bom dia.

eu estou tendo um problema no mozzila, fiz um efeito pelo CSS de GrayEffect.

no chrome ele funciona perfeitamente, porém no mozzila não vai de jeito nem um.. eis o codigo.

img {-webkit-filter: grayscale(1);}
img {-moz-filter: grayscale(1);}
img:hover {-webkit-filter: grayscale(0)}
img:hover {-moz-filter: grayscale(0)}

Poderiam me ajudar?

[Bergamaschi.]

Não conheço grayscale, mas até onde eu vi, ele é medido em porcentagem.

img {-webkit-filter: grayscale(100%);}
img {-moz-filter: grayscale(100%);}
img:hover {-webkit-filter: grayscale(100%)}
img:hover {-moz-filter: grayscale(100%)}

[Twodio]

Remova o -webkit e coloque -moz

[DiF]

Remova o -webkit e coloque -moz

Ele já está fazendo isso...

Bielnick,

tenta remover o -moz do atributo. alguns atributos que precisavam do prefixo -moz, passaram a ser nativos... e o firefox já interpreta alguns assim.

exemplo:

filter: filter(value);

veja este endereço: http://www.inserthtml.com/2012/06/css-filters/

Caso não funcione... adicione isto no seu css:

img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
   -webkit-filter: grayscale(100%);
}

img:hover {
       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(100%);
}

é uma gambiarra danada... mas funciona

Podes ver o exemplo funcionando: http://jsfiddle.net/xDJzU/8/