I really like these long images that scroll up when you move the mouse over them. It is ideal for animating images that are much longer than wide. This makes it possible not to monopolize all the space of a page while allowing interaction with the Internet user. This kind of animation is often found in web design sites. It is ideal for displaying 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 Visual Builder of Divi.

Advertisement: 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 of the portfolio

First of all, you must be in possession of the images. They must be in portrait format and much longer than wide. For my example, I used several image sizes to see if it didn't cause any problems with the scrolling effect when hovering:

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

I advise you to use images of 800px minimum width. As for the length, it may differ but you will have to take it into account in your CSS. We will see this later, in the chapter "Understanding how to change the code".

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

 

2 - Build the layout

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

Construire la section pour les images

Then:

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

 

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

 

3 - Line and image module settings

Before going any further, you need to make some adjustments so that the image effect that slides upwards works...

 

The parameters of the line

Les paramètres de la section

Open the settings of the green line that will host your images (gearwheel icon):

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

Finish by saving your changes.

 

The parameters of the image modules

paramètres du module image

Open the settings of each IMAGE module (gearwheel icon):

  • in the STYLE > ALIGNMENT tab: choose the centered alignment
  • on the ADVANCED > ID and CSS CLASSES tab: 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 number for each image module.

Save your changes.

 

4 - Add CSS to get images that scroll up

Now that you have set up your line and modules correctly, you will be able to copy and paste the following code into the tab 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 only because you will have to modify it according to your needs....

 

5 - Understand how to modify the code

5.1 - Attention to .and_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 class .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 - 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 have to adapt the value of the "top" according to the length of your images. If you use images that are all the same size and ratio, it's easier.

 

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

The media queries queries allow you to influence the appearance of certain elements according to the screen sizes. This is one way to manage the responsive. For more information, read this explanation.

@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 ElegantTheme's blog full of ideas and tutorials!

 

In conclusion....

What do you think of these tips? 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 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 scrolling at mouse hover" Downloaded 88 times

 

images défilantes au hover de la souris

Pin It on Pinterest

Shares
Share This