¿Cómo puedo pasar una imagen por encima con el DIVI BUILDER?

Una imagen que se desplaza al pasar el ratón por encima permite insertar imágenes muy largas que se deslizan hacia arriba al pasar el ratón por encima.

Esto es ideal para animar imágenes que son mucho más largas que anchas. Esto permite evitar el acaparamiento de todo el espacio de una página, al tiempo que permite la interacción con el usuario.

Este tipo de animación se encuentra a menudo en sitios de diseño web. Es ideal para mostrar el diseño de la página diseño de la página de inicio y construir una cartera original...

Para entenderlo mejor, he preparado un vídeo que muestra el resultado final.

En este artículo, explicaré cómo hacer esto con el Constructor visual de Divi.

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - Preparación de las imágenes para el portafolio

En primer lugar, necesitará tener las imágenes. Deben estar en formato vertical y ser mucho más largas que anchas. Para mi ejemplo, utilicé varios tamaños diferentes de imágenes para ver si había algún problema con el efecto de desplazamiento al pasar el ratón:

• Imagen 1: 1244px * 3996px
• Imagen 2: 1244px * 3633px
• Imagen 3: 800px * 2537px

Te aconsejo que utilices imágenes de al menos 800px de ancho. En cuanto a la longitud, puede ser diferente, pero tendrás que tenerlo en cuenta en tu CSS. Esto lo veremos más adelante, en el capítulo "entender cómo modificar el código".

Lea también: cómo cambiar el tamaño de las imágenes utilizadas por Divi

2 - Construir el diseño

Ir a la Páginas > Todas las páginas y añada una nueva página (o edite una página existente). Active el Constructor Visual Divi.

Entonces:

1. Añadir una SECCIÓN ESTÁNDAR (en azul)
2. Añade una columna ROW 1 (1/1) (en verde). Aquí puede insertar un módulo de texto. Esto le permitirá mostrar un título.
3. Añade una nueva LÍNEA (en verde) cuyo asentamiento se divide en 3
4. En cada columna, añadirá un módulo IMAGE

Descubra todos los recursos oficiales sobre la Desplácese a Divi, aquí.

3 - Ajustes de los módulos de línea e imagen

Antes de seguir adelante, tienes que hacer algunos ajustes para que el efecto de imagen deslizante hacia arriba funcione...

3.1 - Parámetros de la línea

Abra la configuración de la línea verde que contendrá sus imágenes (icono de rueda dentada):

• en la pestaña ESTILO > DIMENSIONES: "hacer esta línea de ancho completo" = SÍ
• ficha > ID y CLASES CSS: introduzca ad-wrap en el campo CSS CLASS

Termine guardando los cambios.

3.2 - Parámetros del módulo de imagen

Abra la configuración de cada módulo de IMAGEN (icono de rueda dentada) :

• en la pestaña ESTILO > ALINEACIÓN: elija la alineación centrada
• en la pestaña AVANZADO > ID y CLASES CSS: introduzca ad-height-img-x en el campo CSS CLASS. La "x" debe ser reemplazada por 1, 2 o 3 dependiendo de sus imágenes (ad-height-img-1, ad-height-img-2, ad-height-img-3). Así, tendrá que asignar un nuevo nuemro para cada módulo de imagen.

Guarde los cambios.

4 - Añadir el CSS para obtener una imagen que se desplaza al pasar el ratón

Ahora que ha configurado su línea y sus módulos, puede copiar y pegar el siguiente código en el archivo Apariencia > Personalizado > CSS adicional :

/* image scroll up - ligne 3 colonnes */

.ad-wrap .et_pb_column_1
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #7F32D3;
}

.ad-wrap .et_pb_column_2
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #FF2A62;
}

.ad-wrap .et_pb_column_3
{
overflow: hidden;
height: 300px;
border:5px solid #BBB;
box-shadow: 5px 5px #00C4AA;
}

.ad-height-img-1, .ad-height-img-2, .ad-height-img-3
{
position: absolute;
top: 0;
width: 100%;
height: auto;
transition: top 5s ease-out 0s;
}

.ad-height-img-1:hover
{
top: -850px;
}

.ad-height-img-2:hover
{
top: -750px;
}

.ad-height-img-3:hover
{
top: -800px;
}

@media screen and (max-width: 980px) {

.ad-wrap .et_pb_column_1 {
height: 500px;
}

.ad-wrap .et_pb_column_2 {
height: 500px;
}

.ad-wrap .et_pb_column_3 {
height: 500px;
}

.ad-height-img-1:hover {
top: -1200px;
}

.ad-height-img-2:hover {
top: -1050px;
}

.ad-height-img-3:hover {
top: -1100px;
}

}

Este código es orientativo, ya que tendrá que modificarlo según sus necesidades...

5 - Entender cómo modificar el código

5.1 - Atención a .et_pb_column_1

.ad-wrap .et_pb_column_1 => en fonction du nombre de colonnes et du nombre de sections dans votre page, la classe CSS .et_pb_column_1 peut changer. Vous devrez alors modifier le numéro pour .et_pb_column_2 - .et_pb_column_3 etc. N'hésitez pas à inspecter le code dans votre navigateur pour savoir sur quelle classe CSS agir.
{
overflow: hidden; => ne pas toucher
height: 300px; => vous pouvez modifier la hauteur de la boite de votre image si vous le souhaitez.
border:5px solid #BBB; => ceci n'est que du style, vous pouvez le supprimer ou le modifier.
box-shadow: 5px 5px #7F32D3; => ceci n'est que du style, vous pouvez le supprimer ou le modifier.
}

5.2 - La clase .ad-height-img-x

.ad-height-img-1, .ad-height-img-2, .ad-height-img-3
{
position: absolute; => ne pas toucher
top: 0; => ne pas toucher
width: 100%; => ne pas toucher
height: auto; => ne pas toucher
transition: top 5s ease-out 0s; => vous pouvez changer la rapidité du scroll. Si vous trouvez que 5 secondes c'est trop rapide, augmentez cette valeur. Attention, au plus votre image est longue, au plus le temps de défilement sera rapide et inversement.
}

5.3 - Adaptación a la longitud de las imágenes

.ad-height-img-1:hover {
top: -850px; => modifier cette valeur en fonction de la longueur de votre image. Si l'image est très longue, augmentez cette valeur, si l'image est courte, réduisez cette valeur.
}

.ad-height-img-2:hover {
top: -750px;
}

.ad-height-img-3:hover {
top: -800px;
}

Como puedes ver en el código anterior, tendrás que ajustar el valor de "top" según la longitud de tus imágenes. Si utilizas imágenes que tienen el mismo tamaño y proporción, esto es más fácil.

5.4 - Adaptación del código para pantallas pequeñas (responsive) :

El consultas de medios permiten influir en la apariencia de ciertos elementos según el tamaño de la pantalla. Esta es una forma de gestionar la respuesta.

@media screen and (max-width: 980px) {

.ad-wrap .et_pb_column_1 {
height: 500px; => en version mobile, je propose de passer la hauteur à 500px au lieu de 300px dans la version de bureau
}

.ad-wrap .et_pb_column_2 {
height: 500px;
}

.ad-wrap .et_pb_column_3 {
height: 500px;
}

.ad-height-img-1:hover {
top: -1200px; => augmentez la valeur du "top" pour les versions mobiles. Vous devrez adapter chaque valeur en fonction de votre image.
}

.ad-height-img-2:hover {
top: -1050px;
}

.ad-height-img-3:hover {
top: -1100px;
}

}

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

Una imagen que se desplaza al pasar el ratón: ¡es posible con Divi!

¿Qué te parece este consejo? ¿Podría formar parte de su futuro proyecto? Puede parecer complicado, pero no lo es. Sólo tienes que seguir los pasos y adaptarlos a tu página y a tus necesidades.

De lo contrario, le sugiero que descargue los archivos .JSON de forma gratuita. La carpeta contiene dos archivos :

• el archivo SECTION en formato .JSON: debe ser importado a la biblioteca
• el diseño completo en formato .JSON: puede importarse en una nueva página como un diseño.

"Imágenes que se desplazan con el ratón"Descargado 853 veces

Para ir más allá con el efecto de desplazamiento, aquí hay algunos recursos adicionales:

• ¿Cómo conseguir un menú Sticky on Scroll?
• ¿Cómo se consigue un efecto de desplazamiento en una maqueta?
• Crear un pie de página que aparezca al desplazarse con Divi