9 Efectos rollover en Divi para el módulo anuncio

por | 26 Jun, 2018 | css, Divi

Presentación

Hace unos días un lector me propuso en el grupo de facebook donde compartimos trucos y tutoriales crear uno. Y, normalmente, si es posible y ningún proyecto me lo impide,accedo. Proponía un tutorial que explicase cómo hacer un cambio de color del icono de un módulo anuncio al pasar el ratón sobre él.

Por lo tanto, basándome en un post que había visto hace meses, aquí la url, decidí interpretarlo y adaptarlo a español. Pero crear solo el efecto de cambio de color me pareció escaso. Así que veremos 9 efectos distintos aplicados sobre el módulo anuncio.

Ya hemos visto algo similar en otros tutoriales. Por ejemplo, puedes echar un vistazo en este post

Por su puesto, cada efecto estará acompañado de una breve explicación.

A continuación, tras la presentación del efecto, el módulo anuncio con el css aplicado. Y evidentemente, el código CSS para que puedas copiarlo y pegarlo en tus proyectos.

Cómo aplicar los efectos

Asignar la clase a cada módulo

Necesitarás escribir en cada módulo al que quieras aplicar los efectos la clase CSS correspondiente. Debes ponerla en los ajustes del módulo,concretamente, en la pestaña avanzado. Ahí despliega el apartado ID y clases de CSS  y escribe la clase en Clase CSS.

anuncio-ajustes-css 9 Efectos rollover en Divi para el módulo anuncio

Vamos a numerar las clases del 1 al 9. De esta forma las clases serán anuncio1, anuncio2, anuncio3, y así sucesivamente.

Añadir el código CSS

Puedes poner el código en uno de estos tres sitios:

A) En el panel css de las opciones del tema Divi.

B) En tu hoja de estilo de tu tema hijo, si usas uno.

C) En las opciones de página. Esta es la opción que yo he elegido. Solo se leerá este código al acceder a esta página. No se cargará si no entramos a esta página.

ajustes-css-divi-builder-pagina

Efecto 1. Cambio de color, escala y sombra

Clase css: anuncio1 (esto es lo que tienes que poner en los ajustes del módulo > avanzado…como te explicamos un poco más arriba)

En este primer efecto cambiamos el color de fondo del módulo al pasar encima. También se aplica una sombra tenue. Por último, cambiamos color del título [.anuncio1:hover h4] y el del icono [.et-pb-icon],. Por supuesto que puedes aislar efectos eliminando lo que no necesites. Y claro, también puedes añadir más propiedades. Precisamente así es como llegarás a convertirte en un mago de Divi. Nunca dejes de practicar.

~

MÓDULO ANUNCIO Nº1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 1

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 1 ** */
/* ************************** */

.anuncio1,
.anuncio1 h4,
.anuncio1 .et-pb-icon {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.anuncio1:hover {
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
background-color: #dbd7d7;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.anuncio1:hover h4,
.anuncio1:hover .et-pb-icon {
color: #f7361d!important;
}

Efecto 2. Giro 360º

Clase css: anuncio2
Para este segundo efecto cambiamos, igual que en el anterior, el color de fondo del módulo al pasar encima. Sin embargo, la sombra ahora es más pronunciada. Por último, el icono del módulo anuncio girará 360 grados al pasar el cursor.

MÓDULO ANUNCIO Nº2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 2

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 2 ** */
/* ************************** */
 
.anuncio2,
.anuncio2 .et-pb-icon {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.anuncio2:hover {
    -webkit-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    background-color: #b2d6e2;
}
.anuncio2:hover .et-pb-icon {
    -webkit-transform: scale(1.2) rotate(360deg);
    transform: scale(1.2) rotate(360deg);
}

Efecto 3. Zoom

Clase css: anuncio3

Como puedes comprobar, hemos aplicado un zoom leve (escala 1.03) sobre el módulo y más pronunciado (1.5) sobre el icono del módulo. Ya sabes, echa un ojo al código y experimenta.

MÓDULO ANUNCIO Nº3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 3

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 3 ** */
/* ************************** */
 
.anuncio3,
.anuncio3 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.anuncio3:hover {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}
.anuncio3:hover .et-pb-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

Efecto 4. Cambio de color

Clase css: anuncio4

Tampoco hay que abusar de efectos. Por eso aquí solo cambia el color del fondo, título y el icono. Pero tu puedes experimentar y hacer cambios. Sí, ya lo sé, soy muy pesado.

W

MÓDULO ANUNCIO Nº4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 4

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 4 ** */
/* ************************** */
 
.anuncio4,
.anuncio4 .et-pb-icon,
.anuncio4 h4 {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.anuncio4:hover {
    background-color: #0074a7;
}
.anuncio4:hover .et-pb-icon,
.anuncio4:hover h4 {
    color: #ffd05b!important;
}

Efecto 5. Desplazamiento hacia abajo

Clase css: anuncio5

Fíjate en este efecto. Efectivamente, Como puedes ver en el ejemplo, el css en este módulo aplica desplazamiento. Exactamente 10 pixeles (valores positivos, hacia abajo) para el módulo y 20px para el icono.

MÓDULO ANUNCIO Nº5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 5

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 5 ** */
/* ************************** */
 
.anuncio5,
.anuncio5 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.anuncio5:hover {
    transform: translateY(10px);
}
.anuncio5:hover .et-pb-icon {
    transform: translateY(20px);
}

Efecto 6. Efecto de rebote

Clase css: anuncio6

Y después del 5 va el 6, obviamente. Aquí hemos introducido un efecto rebote, esto es, con la propiedad escala y una función, listo.
¿Podíamos haber hecho el efecto rebote pero contrario? Por supuesto, pero dejemos algunos efectos para próximos tutoriales, jeje.

MÓDULO ANUNCIO Nº6

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 6

.anuncio6 {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.anuncio6:hover, .anuncio6:focus, .anuncio6:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);

}

Efecto 7. Tambalearse

Clase css: anuncio7

Este efecto, la verdad, es que mola bastante. Como ves, es un poco más complejo que los demás. Y además, se sale un poco de los más vistos. Pero, al fin y al cabo, sólo tienes que añadir la clase a tu módulo y pegar el css. ¿verdad? Pues eso.

MÓDULO ANUNCIO Nº7

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 7

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 7 ** */
/* ************************** */
  
@-webkit-keyframes anuncio7 {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
@keyframes hvr-wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    transform: skew(-12deg);
  }
  33.3% {
    -webkit-transform: skew(10deg);
    transform: skew(10deg);
  }
  49.95% {
    -webkit-transform: skew(-6deg);
    transform: skew(-6deg);
  }
  66.6% {
    -webkit-transform: skew(4deg);
    transform: skew(4deg);
  }
  83.25% {
    -webkit-transform: skew(-2deg);
    transform: skew(-2deg);
  }
  100% {
    -webkit-transform: skew(0);
    transform: skew(0);
  }
}
.anuncio7 {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.anuncio7:hover {
  -webkit-animation-name: hvr-wobble-top;
  animation-name: hvr-wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

Efecto 8. Transición cortinilla

Clase css: anuncio8

Y vamos por el octavo efecto. En esta ocasión, vamos a crear una transición de apertura y cambio de color. Desde dentro hacia afuera. ¿Y puedo modificar algo? Por supuesto, cambia el color de la cortinilla, la velocidad (duración), etc.

MÓDULO ANUNCIO Nº8

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 8

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 8 ** */
/* ************************** */
  
.anuncio8 {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
}
.anuncio8:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    background: #4aaecf;
    height: 100%;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 1.0s;
    transition-duration: 1.0s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.anuncio8:hover:before {
    left: 0;
    right: 0;
}

Efecto 9. Desenfoque

Clase css: anuncio9

Por fin, llegamos al último de los efectos. Efectivamente, he aplicado un filtro de desenfoque al icono. Desaparecerá, concretamente, al pasar el ratón por el módulo. También he aplicado una sombra que se activa on hover.

MÓDULO ANUNCIO Nº9

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Código CSS para el módulo anuncio 9

/* ************************** */
/* ** CSS PARA EL MÓDULO ANUNCIO 9 ** */
/* ************************** */
  
.anuncio9, .anuncio9 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
 
.anuncio9 .et-pb-icon {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}
 
.anuncio9:hover {
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}
.anuncio9:hover .et-pb-icon{
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

Conclusión

Francamente, he disfrutado mucho haciendo este tutorial. Espero que tú, también te hayas divertido practicando estos efectos.
Y ahora, como siempre, si no te ha quedado claro dónde debes poner las clases y el CSS, te dejo un pequeño vídeo.