Agrega un efecto de transición «image zoom» (zoom de imagen) en Divi. En este tutorial te explico cómo crear un efecto hover con divi. Agregaremos un efecto de zoom a las imágenes para realizar un efecto hover más llamativo.
Con divi podemos crear diferentes tipos de efectos hover, en este tutorial aprenderás a hacer un efecto hover el cual consiste en que al pasar el cursor sobre cada columna, la imagen de fondo de estas columnas hará un efecto zoom de transición y además nos aparecerán gradualmente los textos que contienen dichas columnas.
Trabajaremos en una composición de una sección con una fila de tres columnas a altura completa. Además te enseñaré a realizar una composición de ancho completo a dos columnas con información en la primer columna y en la segunda una imagen de fondo en blanco y negro pero al pasar el cursor sobre la imagen de fondo ésta cambiará a color. ¿Suena genial verdad?
Antes de que le des play al video es importante que sepas que en este tutorial vamos a utilizar un poco de código CSS para aumentar las características que trae divi por defecto. Pero no te preocupes no es nada del otro mundo.
Le he querido hacer pero sin ancho completo pero el problema es que cuando paso el mouse el efecto hover si se realiza pero el texto aparece sólo cuando paso la flechita del mouse encima del texto y debería ser cuando paso por la imagen.
Su ayuda por favor. Gracias.
Hola Omar. En el segundo comentario del video en youtube tienes la solución, aquí te la dejo:
Hay otro problemita que les está pasando en divi 4.0+ y es que al pasar el cursor sobre la columna no se ve el titulo, este se ve hasta pasar el cursor sobre el, entonces para solucionar esto ya no le apliquen un color con transparencia de 0. Ahora déjenlo normal o con el color que quieran y se van a AVANZADO / CSS PERSONALIZADO / y en ELEMENTO PRINCIPAL hay que pegar el siguiente código:
opacity: 0;
transition: all 0.3s;
Y en su estado HOVER o FLOTAR pegar esta otra línea:
opacity: 1;
Con esto debemos tener el problema solucionado. 🙂
La otra solución es solamente introducir texto en el cuerpo de texto y no en el titulo. El cuerpo de texto sigue funcionando bien. 🙂
Gracias por la respuesta. Logré hacerlo!!!. Pero en movil y tablet no se ve muy bien.
Deseo que ese efecto sólo se muestre en Escritorio, y que en móvil y tablet no tenga ese efecto. Se podrá hacer?, tienes alguna idea?
Tu ayuda porfa.
Sí se puede Omar. Divi en cada opción de cualquier módulo viene con un icono de un teléfono 📱 desde ese icono puedes quitarle los estilos para versiones tableta y móvil. La otra solución es crear dos secciones una para escritorio y otra para tableta-móvil, esto no sería la mejor práctica pero funciona, solamente tienes que ocultar la sección donde no quieres que se muestre desde los ajustes de la sección / avanzado / visibilidad…
Hola, siguiendo tus pasos el tutorial fue fácil de implementar, gracias por tu aporte!
Desde que actualicé a la versión 4.5 con ninguna de las soluciones funciona!
Si coloco el código en elemento principal desaparece la imagen también, si lo pongo en descripción sólo se ve al pasar el cursor justo donde esta el texto. No habrá otra solución? Mil gracias
Hola Daniela qué tal, la verdad no he realizado una prueba con divi 4.5 pero me gustaría revisar. ¿Tienes tu ejercicio en línea? Me podrías dar acceso y hacer la prueba desde allí para ver que es lo que sucede? Si quieres escribeme a [email protected] o por Facebook messenger: https://m.me/ovdivi
Hola, gracias por responderme, lo tengo en mi servidor de prueba pero ya lo subo a donde va y te paso el link por mail y que que no es mi web. Gracias
Hola Oscar! excelente tus tutoriales!
consulta yo lo hice pero sin alto completo y lo que me pasa es que sobresale las imágenes al escalar. La idea es que quede como esta en esta web https://demo.elated-themes.com/borderland2/ ( lo que esta antes de OUR TEAM ) en donde queda dentro de la altura de la fila.
Saludos!!
desde Buenos Aires
Hola Marcos qué tal,para limitar el zoom de las imágenes solamente a su contenedor, puedes hacer lo siguiente: Entrar a los ajustes de la fila / Avanzado / CSS Personalizado y en Elemento principal pegar el siguiente código: overflow: hidden;
Inténtalo y me comentas si te funcionó o no. Saludos.
hola Oscar!! si si funcionó… miralo > https://webejemplo2.com.ar/image-hover/
gracias Master por responder!
¡Genial! Se ve excelente 🙂