Breaking

Post Top Ad

Your Ad Spot

viernes, 8 de marzo de 2019

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.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas