Galería de logos con efecto hover

Todo sitio de una corporación que se respete tiene una de estas galerías de logotipos (logo walls) de clientes, asociados o amigos imaginarios.

Estas galerías usualmente son iguales: en medio de dos secciones, logos acomodados en una linea, en escala de grises, con efecto de color en hover. Y eso es precisamente lo que vamos a hacer aquí.

El HTML

Creamos un contenedor con la clase .logowall y ponemos todas las imágenes dentro.

<div class="logowall">
    <img src="logos/microsoft.png">
    <img src="logos/apple.png">
    <img src="logos/google.png">
    <img src="logos/ibm.png">
    <img src="logos/intel.png">
    <img src="logos/amazon.png">
</div>

Nota: este es el único HTML que vamos a utilizar, asi que en adelante sólo incluiré la vista previa y el CSS.

El grid

Esto es simple: utilizando CSS Grid en el contenedor, ponemos las imágenes en una sola línea y limitamos su tamaño.

.logowall{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.logowall img{
    width: 100%;
    height: auto;
}

grid-template-columns distribuye el contenido de .logowall, es decir, las imágenes, en seis columnas de una fracción (1fr) cada una.

Escala de grises

Antes solíamos hacer dos imágenes. Los más avanzados hacían un sprite, una imagen conteniendo las dos versiones de color. Pero es 2021, y la propiedad filter vino a facilitarnos la vida. Solo tenemos que desaturar completamente la imágen (saturación = intensidad del color).

.logowall{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.logowall img{
    width: 100%;
    height: auto;
    →filter: saturate(0);
}

Devolviéndole el color en :hover

Solo volvemos a poner la saturación al 100% en la propiedad filter de img:hover.

.logowall{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.logowall img{
    width: 100%;
    height: auto;
    →filter: saturate(0);
}
→.logowall img:hover{
    →filter: saturate(100%);
→}

Y si te quieres poner extra-fancy, puedes agrandar la imagen en :hover y de paso usar una transición para que el cambio de color y de tamaño no sea tan abrupto:

.logowall{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.logowall img{
    width: 100%;
    height: auto;
    filter: saturate(0);
    →transition: .1s ease-in all;
}
.logowall img:hover{
    filter: saturate(100%);
    →transform: scale(1.25);
}

Cambiando el numero de columnas

Si necesitas cambiar el número de columnas en las que se acomodan los logos (por ejemplo, para mostrarlos en pantallas más pequeñas) solamente tienes que ir a esta línea que agregamos en el paso 2:

grid-template-columns: repeat(6, 1fr);

Y cambiar el 6 por el número de columnas que quieras.

Es recomendable que hagas lo anterior en tus media queries para asegurar que los logos se vean de un tamaño adecuado en cualquier tamaño de pantalla (si estás viendo este artículo en tu teléfono seguro para este punto ya me odias por los logos tamaño hormiga).

Happy coding!