MarcoGallen.com

HTML, CSS, JS, SEO y UX

Efecto de imagen en color a blanco y negro con CSS

Un efecto muy util es tener una imagen en blanco y negro que cuando pones el mouse encima se convierta en color.

Hoy vamos a hacerlo con puro CSS sin utilizar Javascript.

Primero nuestra imagen:

Blanco y negro a color con solo CSS

Para convertirla en B/N usamos Filter. Debido a que no todos los navegadores lo soportan tenemos que usar prefijos de navegadores:

Para poder hacer el efecto en hover agregamos la transición en el CSS:
Y luego el hover en la misma clase con el filtro (filter) en 0:
Así es como queda al final el efecto:

Blanco y negro a color con solo CSS

Con solamente 6 lineas de código podemos lograr cosas sorprendentes.

Si te gustó este artículo suscríbete a nuestro newsletter en la barra lateral o déjanos un comentario.

El cariño esta en compartir...

1 Comment

  1. estimado este efecto se puede aplicar para una imagen como fondo dentro de un body?

Deja un comentario

Your email address will not be published.

*

© 2017 MarcoGallen.com

Theme by Anders NorenUp ↑