9 Efectos rollover en Divi para el módulo anuncio
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.
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.
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
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
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
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.
MÓDULO ANUNCIO Nº4
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
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
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
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
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.
https://youtu.be/OR0jU_KN0Mg
como puedo cambiar el color del texto? gracias
Hola, Elkis. puedes añadir la etiqueta div en el css que elijas para cambiar el color del texto del anuncio:
.anuncio1:hover div {
color: #7bbf17!important;
}
Acuérdate también de incluirlo en el estado normal, no sólo en hover
Saludos
Muchas gracias por tu trabajo.
Comentarte que en los efectos 7 y 8 da error en content: ""; o algo estoy haciendo mal. No se si puedes decirme cual es el problema.
Muchas gracias por tu tiempo.
Saludos
Hola, Guillermo, muchas gracias por tu comentario. Tienes razón, esos caractereres se habian convertido en html. Debe poner content: «»; sin el código. YA está corregido en el post
Saludos
Muchas gracias por tu rápida respuesta
Aunque a lo mejor hago algo mal, porque funciona correctamente si lo pego en configuración de la página, pero no si lo pego en configuración del anuncio. Pasa con más efectos de anuncios. Y lo mas curioso, en el efecto 8 he quitado en el modulo, la llave última y funciona en modo constructor visual, pero luego en la página real no. Seguiré investigando.
Y muchas gracias otra vez, para lo que quería me vale, y por mis comentarios verás que estoy aprendiendo y para llegar a estas conclusiones, me he tirado 4 horas
Saludos