CSS3 Filtro grayscale y Bordes Error en Chrome

[danielugalde]

Mi Objetivo es lograr que se conserve el Border-Radios al Hacer Hover sobre la Imagen lo cual solo lo eh con: Firefox, safari y opera pero el Chrome no se por que no sirve ojala me puedan ayudar aqui les dejo un link.


http://jsfiddle.net/danielugalde/EEYRf/2/


Saludos y muchas gracias.

[pzin]

Es la primera noticia noticia que tengo de que aparte de WebKit haya filtros para otros motores.

Algo sumamente más fácil sería hacerlo así:

Código HTML:

<img src="http://2.bp.blogspot.com/-wi-jCCp3bHg/UXCfHyaAwoI/AAAAAAAAAKs/mtl0ke0SO2c/s1600/Personajes_Toy_Story_2.jpg">
 

Código CSS:

img {
  width:150px;
  height:150px;
  border-radius: 50%;
  border: 2px solid red;
  -webkit-filter: grayscale(100%);
  transition: all 0.5s ease-out;
}
 
img:hover {
  -webkit-filter: grayscale(0%);
}
 

En Safari y Chrome funciona, en los demás el efecto máscara también debería pero no los filtros.

http://jsfiddle.net/EEYRf/3/

[danielugalde]

Gracias! pero aun estoy pensando una solución!