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

Una imagen que se desplaza al pasar el ratón 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 no acaparar todo el espacio de una página y, al mismo tiempo, permitir la interacción con el usuario.

Este tipo de animación se encuentra a menudo en los 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.

Anuncio: 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 - Preparar 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 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

Le aconsejo que utilice imágenes de 800px de ancho como mínimo. En cuanto a la longitud, puede ser diferente pero tendrás que tenerlo en cuenta en tu CSS. 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.

Siguiente:

1. Añadir una SECCIÓN ESTÁNDAR (en azul)
2. Añade una columna LÍNEA 1 (1/1) (en verde). 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 recibirá sus imágenes (icono de rueda dentada):

• en la pestaña ESTILO > DIMENSIONES: "pasar esta línea en 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 IMAGE (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ñade el CSS para conseguir una imagen que se desplace al pasar el ratón por encima

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 meramente informativo, 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 la imagen

.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 "top" según la longitud de tus imágenes. Si utilizas imágenes que tienen todas el mismo tamaño y proporción, 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 de las formas 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 779 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 hacer un efecto de desplazamiento en una maqueta?
• Crear un pie de página que aparezca al desplazarse con Divi