¿Cómo desplazar una imagen al pasar el ratón por encima (hover) con el DIVI BUILDER?

Uno imagen que se desplaza sobre el ratón permet d'insérer des images très longues qui glissent vers le haut lorsqu'on passe la souris dessus.

C'est idéal pour animer des images beaucoup plus longues que larges. Cela permet de ne pas monopoliser tout l'espace d'une page tout en permettant une interaction avec l'internaute.

On trouve souvent ce genre d'animation dans des sites de webdesign. C'est idéal pour afficher la mise en page d'une page d'accueil (home page layout) et construire un portfolio original...

Para entender mejor, he preparado un video que muestra el resultado final.

En este artículo, explicaré cómo lograr esto con el Divi Visual Builder.

1 - Préparer les images du portfolio

Tout d'abord, vous devrez être en possession des images. Elles doivent être au formato retrato et bien plus longues que larges. Pour mon exemple, j'ai utilisé plusieurs tailles d'images pour voir si cela ne posait pas de soucis avec l'effet de défilement au survol :

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

Je vous conseille d'utiliser imágenes de al menos 800 px de ancho. En cuanto a longitud, esto puede diferir pero usted tendrá que tomar en cuenta en su CSS. Lo veremos más tarde, en el capítulo "comprendre comment modifier le code".

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

2 - Construire le layout

Vaya a la pestaña Páginas y añadir una nueva página (o editar una página existente). Activar el Divi Visual Builder.

Siguiente:

1. Añadir a SECTION STANDARD (en azul)
2. Añadir a LINE 1 colonne (1/1) (en vert). Vous pouvez y insérer un module de texte. Cela vous permettra d'afficher un titre.
3. Añadir nuevo LINE (verde) cuya colonización se divide en 3
4. En cada columna, añadirás un módulo IMAGE

Descubre todos los recursos oficiales sobre Scroll para Divi, aquí.

3 - Les réglages de la ligne et des modules d'image

Avant d'aller plus loin, vous devez faire quelques réglages pour que l'effet d'image qui glisse vers le haut trabaja...

3.1 - Les paramètres de la ligne

Abra la configuración de la línea verde que albergará sus imágenes (imagen de rueda detonada):

• en la pestaña ESTILO ENTRE DIMENSION : "passez cette ligne en pleine largeur" = OUI
• en la pestaña ID de CSS y CLASES : entrar ad-wrap en el campo CLASS CSS

Terminez par l'enregistrement de vos modifications.

3.2 - Les paramètres des modules d'image

Abra la configuración de cada módulo IMAGE (imagen de rueda de tono):

• en la pestaña ESTILO ENTRE ALIGNMENTO : choisissez l'alignement centré
• en la pestaña ID de CSS y CLASES : entrar ad-height-img-x dans le champ CLASSE CSS. Le "x" devra être remplacé par 1, 2 ou 3 en fonction de vos images (ad-height-img-1, ad-height-img-2, ad-height-img-3). Ainsi, vous devrez affecter un nouveau nuémro pour chaque module d'image.

Guarda tus cambios.

4 - Ajouter le CSS pour obtenir une image qui défile au survol de la souris

Maintenant que vous avez bien paramétré votre ligne et vos modules, vous allez pouvoir copier et coller le code suivant dans l'onglet Apariencia > 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;
}

}

Ce code est à titre indicatif car vous allez devoir le modifier en fonction de vos besoins...

5 - Comprendre comment modifier le code

5.1 - Attention au .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 classe .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 - S'adapter à la longueur des images

.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;
}

Comme vous le voyez dans le code ci-dessus, vous devrez adapter la valeur du "top" en fonction de la longueur de vos images. Si vous utilisez des images qui ont toute la même taille et le même ratio, c'est plus facile.

5.4 - Adapter le code pour les petits écrans (responsive) :

El consultas de medios vous permettent d'agir sur l'apparence de certains éléments en fonction des tailles de l'écran. C'est l'une des façons de Gestión responsable.

@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;
}

}

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!

Une image qui défile au survol de la souris : c'est possible avec Divi !

Que pensez-vous de ce tips ? Pourrait-il faire partie de votre futur projet ? Ça peut paraître compliqué mais ça ne l'est pas. Il suffit de bien suivre les étapes et de les adapter à votre page et vos besoins.

De lo contrario, sugiero que descargas. Archivos JSON gratis. La carpeta contiene dos archivos:

• el archivo de la SECCIÓN en formato .JSON: debe ser importado en la biblioteca
• el diseño completo en formato .JSON: se puede importar en una nueva página como un diseño.

Descargar imágenes que se desplazan al ratón img-hover-css.zip – Téléchargé 10632 fois – 2,08 Mo

Pour aller plus loin avec l'effet de scroll, voici quelles ressources supplémentaires :

• ¿Cómo conseguir un menú Sticky en Scroll?
• ¿Cómo realizar un efecto de desplazamiento en una burla?
• Crear un pie que aparece en el pergamino con Divi