Cómo convertir una imagen a blanco y negro con css

 In Tutoriales CSS

Hay ocasiones en las que necesitamos transformar imágenes a blanco y negro pero no lo queremos hacer con Photoshop ya que sería mucho trabajo si se trata de un grupo relativamente grande de imágenes. O quizá necesitamos mostrar una imagen en la que en mouse out se presente a blanco y negro, y luego en mouse over se vuelva a todo color. Ya sea para una u otra solución, css nos permite lograr este efecto con una simple propiedad: filter.

Usando la propiedad filtro greyscale

Para utilizar esta propiedad, primero deberán definir la clase de la imagen en su hoja de estilo css. Para este ejemplo, la clase de la imagen será .blanconegro

Luego tendremos que incluir las propiedades de filtro para los navegadores Chrome y Safari con el siguiente prefijo:

Ahora, para que el filtro funcione en versiones anteriores de Firefox 35, se tendrá que añadir un filtro SVG. Para esto se deberán añadir la siguiente línea:

Por último, para dar soporte en navegadores IE, añadiremos la siguiente línea:

Cómo hacer un efecto hover para convertir una imagen en blanco y negro, a color en mouse over

Para crear un efecto en el que de primera vista la imagen se encuentre en blanco y negro, para luego -al pasar el mouse encima de la imagen “mouse over”- se muestre a todo color, tendremos que aplicar un selector :hover a la clase .blanconegro, para entonces definir lo siguiente:

Aquí puedes ver el resultado:

0

Recommended Posts

Leave a Comment

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.