propiedad - El filtro CSS en escala de grises no funciona en Firefox

hue rotate css

Question

Tengo problemas para hacer una transición de escala de grises a color, funciona en cromo, pero eso es todo.

Aquí está el HTML:

<div id="post" style="background-image:url(''bg.png'');background-repeat:no-repeat;">
<p><a href="/post.php?id=1">Title - Date</a></p>
</div>

Aquí está el CSS:

#post{
padding:0;
margin:0 auto;
margin-bottom:25px;
border:solid 1px #000;
height:150px;
width:750px;
display:block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=/'http://www.w3.org/2000/svg/'><filter id=/'grayscale/'><feColorMatrix type=/'saturate/' values=/'0.5/'/></filter></svg>#grayscale");
filter: gray alpha(opacity=50);
-webkit-filter: grayscale(50%);
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-backface-visibility: hidden;
}
#post:hover{
filter: none;
-webkit-filter: grayscale(0%);
}

Gracias por cualquier ayuda, se agradece.

Answer 1

Del filter: grayscale(100%); Firefox 35 filter: grayscale(100%); Deberia trabajar.

Consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility

Answer 2

Intenta configurar #post: pasa el cursor sobre esto:

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

Puedes buscarlo aquí. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

En caso de que el enlace del tutorial esté muerto, funciona en: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77.

.slides li img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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"); /* Firefox 10+, Firefox on Android */
}
.slides li img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=/'http://www.w3.org/2000/svg/'><filter id=/'grayscale/'><feColorMatrix type=/'matrix/' values=/'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0/'/></filter></svg>#grayscale");
}

Como lo señala Adam a continuación: Del filtro Firefox 35: escala de grises (100%); Deberia trabajar.