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.

Build the section for 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

The parameters of the 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

image module settings

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 .and_pb_column_1 => Depending on the number of columns and the number of sections in your page, the CSS class .and_pb_column_1 can change. You will then have to modify the number for .and_pb_column_2 - .and_pb_column_3 etc. Feel free to inspect the code in your browser to know which CSS class to act on.
{
overflow: hidden; => do not touch
height: 300px; => You can change the height of the picture box if you want.
border:5px solid #BBBB; => This is only style, you can delete or modify it.
box-shadow: 5px 5px 5px #7F32D3; => This is only style, you can delete or modify it.
}

 

5.2 - The class .ad-height-img-x

.ad-height-img-1, .ad-height-img-2, .ad-height-img-3
{
position: absolute; => do not touch
top: 0; => do not touch
width: 100%; => do not touch
height: auto; => do not touch
transition: top 5s ease-out 0s; => you can change the speed of the scroll. If you find that 5 seconds is too fast, increase this value. Be careful, the longer your image is, the faster the scrolling time will be and vice versa.
}

 

5.3 - Adapting to the length of the images

.ad-height-img-1:hover {
top: -850px; => modify this value according to the length of your image. If the image is very long, increase this value, if the image is short, reduce this value.
}

.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; => in the mobile version, I propose to increase the height to 500px instead of 300px in the desktop version
}

.ad-wrap .et_pb_column_2 {
height: 500px;
}

.ad-wrap .et_pb_column_3 {
height: 500px;
}

.ad-height-img-1:hover {
top: -1200px; => Increase the value of the "top" for mobile versions. You will have to adapt each value according to your 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 71 times

 

scrolling images with mouse hover

suscipit ipsum luctus eget facilisis libero sed in id elementum ante. ipsum

Pin It on Pinterest

Shares
Share This