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

Añadir módulos en Prestashop

Añadir un modulo es bastante sencillo, pero por si tienes dudas lo vamos ha realizar en 5 sencillos pasos.. Los 5 pasos de instalar un

bimask.es

Bimask.es

Una web con idea de ayudar a través y a favor de la pandemia de Covid

Jucarsa.es

Jucarsa.es

Mi primer trabajo como desarrollador. Una web creada en prestashop y conectada a Sage Murano a través de un importador propio.

¿Quién eres?