Cambiar logos (o lo que sea) de escala de grises a color con CSS en Divi. Paso a paso

por | 26 Sep, 2018 | css

Presentación

En el tutorial de hoy vamos a hacer que cambien unos logos de escala de grises a color con CSS en Divi.

Seguramente si has participado en algunos proyectos con empresas destacadas (o no) querrás promocionarlo. Es una buena forma de aportar confianza a tus posibles clientes. Y además, estas publicitando también a la empresa con la que colaboraste. Por eso es muy habitual añadir a la webs un apartado con los logos de las empresas de las que eres partner o has colaborado.

De todas formas, aunque hemos elegido unos logos para el efecto, puedes asignar el efecto a cualquier contenido. Una sección, una fila o cualquier tipo de módulo. Cualquier elemento que sea suceptible de cambiar de modo de color.

Ya son unos cuantos los tutoriales en los que hemos utilizado CSS. Por ejemplo, para añadir una sombra flotante a las imágenes de una galería. Bajo estas líneas, como suele ser habitual, puedes ver el efecto que practicaremos. Pasa el ratón  por cada logotipo para verlo.

1. Preparando la práctica

Obviamente, lo primero que necesitamos son los logotipos o imágenes que vas a utilizar en esta práctica. Así que impórtalas a tu biblioteca para tenerlas listas cuando las necesites. Es conveniente que tengan el mismo tamaño para un mejor manejo de éstas.

Insertamos una sección donde quieras que aparezcan tus logos y agregamos una fila con cuatro columnas.

insertar-4-columnas

Cada columna va a contener un módulo tipo imagen con su logotipo correspondiente. De manera que insertamos un módulo de imagen con el primer logo en la primera columna.

2. Añadir la clase

Abrimos los ajustes del primer módulo de imagen y,  en la pestaña Avanzado (1) > Clases & ID CSS(2) > Clase CSS, escribimos logotipo(3). Donde pone imagen zoom (La captura de imagen es de otro tutorial), pon logotipo. Este es nombre que he elegido para identificar el fragmento de código CSS que hará el efecto.

clase-css-zoom-imagen

Este código lo empezaremos a crear a continuación.

3. Crear escala de grises a color con CSS

Si no lo has hecho ya, activa el constructor visual y abre el Personalizador del tema. Desde ahí abre el panel Css adicional, que es donde crearemos el código CSS.

personalizador-de-temas-divi

Empezamos a escribir la clase logotipo:

.logotipo{
filter:grayscale(100%);
}

Esto convierte nuestro logo (al que le hemos aplicado la clase logotipo) en escala de grises. Ese será su estado predeterminado.

Ahora añadimos al código que ya tenemos el siguiente código:

.logotipo:hover{
filter:grayscale(0%);
}

Esto hará que al pasar el cursor por la imagen (hover), oculte el efecto de escala de grises (0%).

Si todo va bien, verás que ya tenemos la estructura base creada. Vamos a personalizar un poco más.

reducimos la opacidad al 50% añadiendo la propiedad opacity. Lo haremos para acentuar más el efecto al pasar el cursor. No olvidar restablecer la opacidad en el estado hover. Quedará así:

.logotipo{
filter:grayscale(100%);
opacity:.5;
}

.logotipo:hover{
filter:grayscale(0%);
opacity:1;
margin-top:-8px;
}

4. Agregar desplazamiento

Seguimos personalizando. Ahora queremos incorporar desplazamiento cuando el cursor se coloca sobre la imagen. La propiedad que usaremos es margin-top con valor negativo y lo aplicaremos en el estado hover. A estas alturas, este es el código que tenemos.

.logotipo{
filter:grayscale(100%);
opacity:.5;
}

.logotipo:hover{
filter:grayscale(0%);
opacity:1;
margin-top:-8px;
}

5. Transición y sombra

A continuación, para que este desplazamiento y cambio de gris a color se produzca animándose, añadimos la transición en sus distintas versiones. Esto último para que se vea correctamente en cualquier navegador. El valor (0.6) lo podemos cambiar dependiendo de si queremos que la transición sea más rápida o más lenta. A mayor valor, más lenta, claro.

.logotipo{
filter:grayscale(100%);
opacity:.5;
transition:0.6s;
-webkit-transition: .6s;
-moz-transition: .6s;
}

.logotipo:hover{
filter:grayscale(0%);
opacity:1;
margin-top:-8px;
}

Y por último agregamos la sombra. También en sus versiones para los distintos navegadores. Al final tenemos esto:

css-final-escala-de-grises

Y el código completo para que copies y pegues:

.logotipo{
filter:grayscale(100%);
opacity:.5;
transition:0.6s;
-webkit-transition: .6s;
-moz-transition: .6s;
}

.logotipo:hover{
filter:grayscale(0%);
opacity:1;
margin-top:-8px;
-webkit-box-shadow: 0px 20px 26px -9px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 20px 26px -9px rgba(0,0,0,0.75);
box-shadow: 0px 20px 26px -9px rgba(0,0,0,0.75);
}

6. Crear los otros logos

Sólo nos queda duplicar el módulo que ya tenemos configurado y sustituir el logo correspondiente en cada módulo.

Si hay algo que no te ha quedado claro seguro que el vídeo que pongo a continuación lo aclara. Ya sabes, si te ha gustado…¡COMPARTE! ¡Gracias!