Como convertir imágenes en blanco y negro, CSS

Css blanco y negro

En este caso tenemos un código muy sencillo. Esta es una linea que suelo usar para slider como marcas o proveedores que no siguen el mismo patrón de colores de la web y queremos que no quede como un pegote.

De esta manera obtenemos una semejanza cromática. Con el siguiente código convertimos la imagen a blanco y negro con una escala de grises:

img {
    filter: grayscale(100%);
}

Y como detalle me suele gustar que al pasar por encima si que se vean los colores originales por lo que añadimos esta linea.

img:hover {
    filter: none;
}

Sencillo y practico.

Compartir

Otros post

Primer proyecto angular

Primer proyecto Angular

Después de seguir los pasos de instalación, ya tenemos instalado todo lo necesario para comenzar nuestro primer proyecto con Angular, así que para crearemos una

plugin Site Kit

Site Kit

Uno de los primeros plugins que suelo instalar en mis proyectos de wordpress.

¿Quién eres?