Filtros CSS: escala de grises

Cuéntalo! Share on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInShare on TumblrEmail this to someone

El efecto de escala de grises nos puede dar un efecto atractivo en los “hover” de nuestras imágenes. O al revés, mostrar siempre la imagen en escala de grises y mostrar los colores al hover.

Para aplicar-lo es muy sencillo, con poner las propiedades adecuadas en el css es suficiente:

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

Si queremos podemos añadir un efecto de transición para hacer mas atractivo el efecto:

img:hover{
-webkit-transition: all 1s ease;
-webkit-filter: grayscale(1);
}
img{
-webkit-transition: all 1s ease;
}