3 Efectos de rollover sobre iconos en Divi

Crear pequeñas interacciones son una buena forma de mejorar la experiencia de usuario cuando interactúa con nuestro sitio web. Crear pequeñas animaciones que se activan al pasar el ratón por alguna zona dará un plus de entretenimiento a nuestro visitante. Y todo esto con un poco de CSS.

En este tutorial, inspirado en un post del blog de Elegant themes, vamos a aprender como hacer 3 efectos de rollover sobre el módulo anuncio de Divi.

Efectos de rollover Divi. 3 formas de animar

Divi viene con una biblioteca de iconos que puedes añadir a a tu sitio fácilmente con el módulo Anuncio (Blurb).  Si queremos llamar la atención sobre tu información, podemos animar el icono que aparece encima del contenido.

Veremos dos formas de activar la animación del icono. En este primer ejemplo, la animación del icono se activa cuando pasamos el cursor sobre el icono real. Los tipos de animación que veremos son girar, sacudir y escalar.

Lo primero que haremos será crear una página o entrada y activar Usar constructor Divi. Pulsa insertar columnas y selecciona 3 columnas. A continuación, inserta un módulo Anuncio en la primera columna.

Los ajustes que debes hacer en el módulo serán los siguientes:

• Pon un título, por ejemplo ROTAR ICONO
• Introduce una URL (almohadilla, #, para este tutorial)
• Usar icono: Sí, y elije uno
• Color de icono: Dale un color a tu icono, yo he puesto #498bc1
• Ubicación de la imagen o el icono: Superior
• Animación de la imagen o el icono: Sin animación
• Orientación del texto: Centro
• Si quieres añadir contenido, introduce el texto que desees

Por supuesto, puedes configurar el módulo como te parezca, intenta nuevas formas de crear tu módulo.

Duplicando y configurando los módulos

Para aplicar los efectos vamos a referenciar la clase que vamos a crear para cada uno de ellos en las pestaña CSS personalizado de cada módulo anuncio. Así que pulsamos en la pestaña CSS personalizado del módulo y añadimos la clase rotar en el campo Clase CSS como ves en la imagen lo que activará la animación de rotación. Guarda tus cambios pulsando Guardar y salir.

Antes de insertar nuestro código CSS , tenemos que configurar los dos siguientes módulos anuncio duplicando dos veces el que acabamos de crear y arrastrándolos a las dos columnas vacías.

Ahora cambiamos los ajustes de los nuevos módulos Anuncio. En el segundo modificamos el texto e icono y en CSS personalizado, en el campo Clase CSS, cambiamos la clase rotar por sacudir. Lo mismo en el tercer módulo, en esta ocasión la clase es escalar.

Añadir el código CSS

Una vez tenemos listos nuestros tres módulo de Anuncio, insertamos el código CSS. Podemos insertarlo en Divi > Opciones del Tema > nos desplazamos hacia abajo y pegamos el código en el campo CSS personalizado.

También podemos añadir el código CSS directamente a la entrada o página, pulsando en ajustes de Divi Builder (imagen inferior) que es la opción que yo he elegido.

Este es el código CSS que debes copiar.

.rotar .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.rotar .et-pb-icon:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.sacudir .et-pb-icon:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

.escalar .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
} 

Aquí puedes ver el tutorial terminado:

Si lo que quieres es que se ejecute el efecto cada vez que pases por cualquier parte de cada módulo, no sólo por el icono, sustituye el código CSS que habías pegado por éste:

.rotar .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.5s ease-out;
}
.rotar:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.escalar:hover .et-pb-icon {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

.sacudir:hover .et-pb-icon {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

@keyframes sacudir {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}

20%, 80% {
transform: translate3d(2px, 0, 0);
}

30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}

40%, 60% {
transform: translate3d(4px, 0, 0);
}
}

Aquí puedes ver el tutorial terminado: