How do I hover an image with the DIVI BUILDER?

An image that scrolls when the mouse is hovered over it allows you to insert very long images that slide upwards when the mouse is hovered over them.

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

This kind of animation is often found on web design 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 showing 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 recognise. The classic links are in purple and sponsored links are in pink.

1 - Preparing 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 different 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 that are at least 800px wide. As for the length, this may differ but you will have to take this into account in your CSS. We will see this later, in the chapter "understanding how to modify the code".

Read also: 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.

Then :

1. Add a STANDARD SECTION (in blue)
2. Add a ROW 1 column (1/1) (in green). You can insert a text module here. 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

Open the settings for the green line that will hold your images (cogwheel icon):

• in the STYLE > DIMENSIONS tab: "make this line 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

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

• on the STYLE > ALIGNMENT tab: choose centred alignment
• in 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 obtain 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 indicative 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 the length of the 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;
}

As you can see in the code above, you will need to adjust the value of the "top" according to the length of your images. If you use images that are all the same size and ratio, this is 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 way of 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 mouse-over: 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 download the .JSON files for free. The folder contains two :

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

“Images qui défilent au hover de la souris” Téléchargé 2867 fois

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

• How to get a Sticky on Scroll menu?
• How do you achieve a scroll effect in a mockup?
• Create a footer that appears on scroll with Divi