How to Automatically Scroll Image Elements (Advanced)

If you have ever created a new funnel and like the way our images auto scroll when you hover over them so you can see the full height of the funnel page, then you'll like this guide

Notes: 

• Do not turn off auto-height on image element. 

• The image in the editor will still show the original image height. 

• This has only been tested on a normal Image Element. No guarantee it works with other images in the builder such as those found in course list, post list, feature block, or other elements. 

• This won't work on mobile devices due to those devices not having a mouse pointer in most cases, so consider that in your designs. 

Step 1: Add your Image

By far the easiest step. Just add your image with the full height. The magic will take place in the next steps. 

Step 2: Add an extra DIV class to the image element. 

To do this, go to the advanced image options by clicking the gear icon in the image toolbar, and selecting "advanced"

Then, go to "Advanced" and in the code before enter the code you see here:

<div class="imgscroller">

Just like this: 

Now, right below that, you'll just add the closing div code:

</div>

Just like this: 

Step 3: Add some CSS code

Change all the instances of 450px in the code below to match the height and width of your image as you want it to show on the page. 

.imgscroller {
    max-height: 450px!important;
    max-width: 450px; /*set this to the width you set the image to in editor */
    margin: auto;
    overflow: hidden;
    scroll-margin: 450px;
}

.imgscroller img {
    transition: transform 4.2s ease-in-out; /* change 4.2s to desired speed */
    height: 100%; 
}

.imgscroller:hover img {
    transform: translateY(calc(-100% + 450px)); /* height offset from max-height above */
}

As a reminder, custom CSS can be added on the page by clicking the settings icon at the top, and then opening the "Custom CSS" tab like you see here:

Once you do all this then it should work. Now all you have to do is repeat Step 2 if you want to use the same CSS on other images.

Each image should vertically scroll to the bottom now when someone hovers their mouse pointer over the image.