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

Cristefe.es

Cristefe.es

Esta web es un regalo a mi pareja, mi primera página en wordpress y posiblemente la que más cambios a sufrido. Inconformista, detallista y siempre

¿Quién eres?