Aveces necesitamos que una imagen o un grupo de imagenes a color se vean en Blanco y Negro, aquí te mostraté como convertir una imagen a color en Blanco y Negro usando CSS, cabe aclarar que seguramente hay muchas más formas de llegar a resultados similares, pero te mostraré la forma que uso y que me parece más conveniente.
[wp_ad_camp_1]
Sin más preambulo, la solución que tenemos aquí es básicamente usar este estilo CSS que se puede aplicar a un solo elemento, o también a una clase para ser usado por cualquier imagen o grupo de imagenes. En este caso creé un estilo para una clase llamada blanco-negro, la cual al ser usada en cualquier imagen cambiará los todos a una escala de grises que es lo que necesitamos.
.blanco-negro {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
Procedo a aplicar dicho estilo al logo de mi blog, sin embargo lo aplicaré directamente sobre el HTML de la imagen porque posteriormente editaré esta clase para adicionar más cosas. Por lo que el logo del blog con el estilo anterior luce de la siguiente forma.
Imagen Blanco y Negro usando CSS, Hover
Sin embargo, lo que en realidad necesitaba era desarrollar la página de “Clientes” dentro del sitio web de un cliente, lo que él quería era que al cargar dicha página se cargaran las imagenes de sus clientes en blanco y negro, pero que al pasar el cursor sobre cada imagen (hover) se vieran los colores originales del logo de cada uno de sus clientes. En este caso usé el estilo anterior pero adicionalmente añadí el hover, donde le quitamos la escala de grises para que quede la imagen original.
.blanco-negro {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.blanco-negro:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
En este caso sí usaré la clase blanco-negro sobre la imagen y el resultado será.
Si tienes una forma más rápida o eficiente de lograr el mismo objetivo no dudes en comentar.