En este tutorial gratis aprenderás a crear un efecto de animación fancy hover con divi y sin plugins.
El ejercicio que haremos será una sección de un equipo pero en realidad puedes adaptarlo para cualquier sección de tu sitio web.
El efecto consiste en tener una sección con una fila de tres columnas y en cada una de las columnas mostraremos un integrante del equipo. En primer instancia la foto de perfil del integrante del equipo se verá a escala de grises pero al pasar el cursor sobre la imagen ésta tendrá un efecto de transformación de rotación y escala, además en su estado hover la imagen cambiará de escala de grises a color con un efecto gradiente o degradado.
Los textos también tendrán un efecto de transición muy sutil de abajo hacia arriba que hará mas elegante esta composición.
Es difícil explicarlo con palabras así que mejor dale play el video y aprende todo sobre este increíble efecto hover con divi.
RECURSOS:
1. Descarga los assets (imágenes)
2. Fragmento de código CSS para ajustar las columnas:
display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1/1; overflow: hidden; padding: 0 25px;
3. Estilos CSS OV Fancy hover
.ov-fancy-hover .et_pb_column .nombre {
transition: 300ms transform ease;
}
.ov-fancy-hover .et_pb_column:hover .nombre {
transform: translateY(-4ex);
transition: 300ms transform ease;
}
.ov-fancy-hover .et_pb_column .puesto {
opacity: 0;
transition: 300ms opacity linear, 300ms transform ease-in-out;
}
.ov-fancy-hover .et_pb_column:hover .puesto {
transform: translateY(-3ex);
opacity: 1;
transition: 300ms opacity linear, 300ms transform ease-in-out;
}
.ov-fancy-hover .et_pb_column .imagen {
object-fit: cover;
filter: grayscale(1);
transition: filter 200ms ease, transform 250ms linear;
}
.ov-fancy-hover .et_pb_column:hover .imagen {
filter: grayscale(0);
transform: scale(1.05) rotate(1deg);
}
.ov-fancy-hover .et_pb_column::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(
180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
transition: 300ms opacity linear;
}
.ov-fancy-hover .et_pb_column:hover::before {
background-image: linear-gradient(
180deg,rgba(255,255,255,0) 0%,rgba(54,0,128,0.9) 100%);
}
hola no me reconoce la escala de grises ni tampoco se despliega el menu
Hola Wilson, ¿Qué versión de divi tienes? ¿Cuál es la url de tu web?
Hola, recientemente lo estoy aplicando a un sitio web de prueba pero está dando un error en la versión de tableta. En vez de mantenerse en proporción 1:1 se colapsa y quedan como pequeños rectángulos que solo muestran el título.
Como es de un cliente no puedo publicar la url de forma pública todavía, ¿hay alguna forma de recibir tu guía para este problema?
La de computadora y celular se ve super bien.
Hola Jennifer, revisa que tengas definida la altura de la columna en vista tableta.
Si el problema persiste me puedes compartir la url por facebook messenger.
Hola, tengo el mismo problema en la versión de escritorio y la de cel, se ve perfecto. Pero en la de tablet queda un espacio entre la imagen y el texto en cada fila. Te agradezco si me puedes ayudar, he revisado varias veces y veo todo igual al video pero no entiendo que es lo que no funciona. Intenté revisar el alto en tablet pero tampoco pasa nada cuando lo ajusto , así que lo dejé como estaba. Te dejo el link aquí abajo. Muchas gracias!
Hola Patricia, me gustaría revisar tu ejercicio. Comentas que dejaste el link pero no lo veo 🧐 quizá no se ha publicado. Coméntame el link y revisamos 😀
Hola Oscar, si por favor échale un ojito, no se en que fallo he visto el video y sigo paso a paso pero me sale ese error en tablet.
Te dejo el link.
https://abogadosdefamiliabogota.com/nuevo-sitio/
Muchas gracias
Hola Patricia, al parecer es porque tu imagen tiene un tamaño máximo de 400px por 400px. Cuando cargas tu imagen desde la biblioteca en la parte lateral viene una opción para cambiar el tamaño de la imagen, asegúrate que estés seleccionando tamaño completo…
Hola! no me funciona el efecto de los Estilos CSS OV Fancy hover, si tengo que pagarte avisame me gusto mucho tu trabajo.
Hola Angelo, creo que lo resolvimos por messenger, te hacía falta la clase ov-fancy-hover
Tenías razón, debía poner las imagenes en 800px -800px. Así ya no se ve el error.
Muchas gracias!