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

Actualizado el 26/02/2020 | Publicado el 11/02/2019 | 9 comentarios

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.

Construire la section pour les images

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

Paramètres de la section pour une image qui défile au survol de la souris

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

paramètres du module image

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 584 veces

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

images défilantes au hover de la souris
Roll out images on mouse hover with Divi Builder

1.242 palabras

5

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

9 Commentaires

  1. Valerie M.

    Bonjour,
    Et merci pour ce tuto très très intéressant.
    Je l’ai mis en œuvre pour test sur une de mes pages. Ça me donne des idées et j’aimerai avoir votre avis. Pensez-vous que je pourrais l’adapter dans ce qui existe déjà sur cette page ? Dans l’écran de l’ordinateur ?

    Je vous donne le lien et vous le dites ce que vous en pensez :
    https://www.valerie-mersier.fr/creation-webdesign-vignoble-domaine-burle/

    Merci de votre retour…
    Valérie

  2. Lycia Diaz

    Bonsoir Valérie,
    Merci 😉
    J’ai regardé ton lien et effectivement ça pourrait être intéressant. Maintenant pour arriver à le mettre dans l’ordinateur ça risque d’être un peu costaud… à tester. Sinon, il y a aussi ce tuto qui pourrait faire l’affaire : Créer un effet de scroll dans un mockup
    A bientôt !

  3. Valerie M.

    Merci Lydia…
    je vais faire un essai dès que j’en aurait le temps 🙂
    et je ne manquerai pas de te tenir au courant.
    Bien à toi,
    Valérie

  4. Sonia

    Bonjour, j’ai suivi le tuto et voilà le résultat :O
    https://web-etcetera.fr/dev/
    Pouvez-vous me dépanner ?

  5. Sonia

    j’ai chargé le layout pardon, avec le tuto, le résultat était différent mais bizarre aussi

  6. Lycia Diaz

    Salut Sonia,
    Les paramétrages ont été faits en fonction de mon site de test. Si vous l’utilisez ailleurs, il faudra certainement faire des petites modifications. L’idée est de vous fournir une base, après il faut la customiser 😉

  7. Lycia Diaz

    Désolée Sonia, j’arrive un peu trad, je ne vois rien sur la page.

  8. Priscille

    Bonjour,

    Je souhaiterais ajouter un hover sur des posts générés dynamiquement (articles, etc.), comme vous le faites pour vos articles avec cette image en transparence. Avez-vous un tuto qui explique comment procéder ?
    Merci d’avance,
    Priscille.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto