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.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.