Como convertir una imagen a blanco y negro con css?

  • 1 Respuestas
  • 1647 Vistas
*

octavio Mexico

  • **
  • 94
  • +4/-0
    • Ver Perfil
Como convertir una imagen a blanco y negro con css?
« en: Septiembre 09, 2015, 09:32:18 am »
Hola a todos,

Tengo un problema, necesito convertir una imagen de color a blanco y negro con css y que cuando pases el cursor se vuelva de color una vez mas..

alguna idea?
Gracias



*

Jonathan

  • *****
  • 129
  • +156/-0
  • Don't work hard, work intelligent
    • Ver Perfil
    • Ingeniero en Sistemas Computacionales
Re:Como convertir una imagen a blanco y negro con css?
« Respuesta #1 en: Septiembre 09, 2015, 09:35:59 am »
Hola amigo,

Puedes convertir tu imagen a blanco y negro con css asi

Código: [Seleccionar]
img {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

y quitar el filtro cuando el mouse pase por encima de tu imagen asi

Código: [Seleccionar]
img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

Suerte!