How to hover an image with the DIVI BUILDER ?

Updated on 26/02/2020 | Published on 11/02/2019 | 9 comments

An image that scrolls on mouse over allows you to insert very long images that slide up when you move the mouse over them.

This is ideal for animating images that are much longer than they are wide. This allows you to not monopolize all the space on a page while allowing interaction with the user.

This kind of animation is often found in webdesign sites. It is ideal to display the page layout home page layout and build an original portfolio...

To better understand, I have prepared a video that shows the final result.

In this article, I will explain how to do this with the Divi's Visual Builder.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Prepare the images for the portfolio

First of all, you will need to have the images. They must be in portrait format and much longer than they are wide. For my example, I used several sizes of images to see if there were any problems with the scrolling effect on mouse-over:

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

I advise you to use images of 800px wide minimum. As for the length, it can differ but you will have to take it into account in your CSS. We'll see that later, in the "understanding how to modify the code" chapter.

Also read: how to change the size of images used by Divi

2 - Building the layout

Go to the Pages > All pages tab and add a new page (or edit an existing page). Activate the Divi Visual Builder.

Construire la section pour les images

Next:

  1. Add a STANDARD SECTION (in blue)
  2. Add a LINE 1 column (1/1) (in green). You can insert a text module. This will allow you to display a title.
  3. Add a new LINE (in green) whose settlement is divided into 3
  4. In each column, you will add an IMAGEmodule

Discover all the official resources about the Scroll to Divi, here.

3 - Line and image module settings

Before going any further, you need to make a few adjustments to make the sliding up image effect work...

3.1 - Line parameters

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

Open the settings of the green line that will receive your images (cogwheel icon):

  • in the STYLE > DIMENSIONS tab: "pass this line in full width" = YES
  • tab > ID and CSS CLASSES: enter ad-wrap in the CSS CLASS field

Finish by saving your changes.

3.2 - Image module parameters

paramètres du module image

Open the settings for each IMAGE module (cogwheel icon) :

  • in the STYLE > ALIGNMENT tab: choose centered alignment
  • on the ADVANCED tab > ID and CSS CLASSES: enter ad-height-img-x in the CSS CLASS field. The "x" should be replaced by 1, 2 or 3 depending on your images (ad-height-img-1, ad-height-img-2, ad-height-img-3). Thus, you will have to assign a new nuemro for each image module.

Save your changes.

4 - Add the CSS to get an image that scrolls on mouse over

Now that you have set up your line and modules, you can copy and paste the following code into the Appearance > Custom > Additional CSS :

/* 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;
}

}

This code is for information purposes only as you will have to modify it according to your needs...

5 - Understanding how to modify the code

5.1 - Attention to .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 - The .ad-height-img-xclass

.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 - Adapting to image length

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

As you can see in the code above, you'll need to adjust the "top" value based on the length of your images. If you use images that are all the same size and ratio, it's easier.

5.4 - Adapting the code for small screens (responsive) :

The media queries allow you to influence the appearance of certain elements according to screen sizes. This is one of the ways to manage the responsive.

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

}

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

An image that scrolls on mouseover: it's possible with Divi!

What do you think of this tip? Could it be part of your future project? It may sound complicated but it's not. Just follow the steps and adapt them to your page and your needs.

Otherwise, I suggest you to download the .JSON files for free. The folder contains two files :

  • the SECTION file in .JSON format: it must be imported into the library
  • the complete layout in .JSON format: it can be imported into a new page as a layout.

"Images that scroll with the mouse hover"Downloaded 779 times

To go further with the scroll effect, here are some additional resources:

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

1,242 words

5

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

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.

Pin It on Pinterest

Shares
Share This