If you’re a WordPress user and build your website with Divi Builder, you must admit that Divi Builder is one of the best visual web-building platforms out there. They allow flexibility to maximize the potential of the features they have.
One of the features that you can maximize is the Divi Image module. This article will show you how to create an auto-scroll image on hover in Divi without the help of any plugin.
Steps to Create an Auto-Scroll Image on Hover in Divi Builder
Step 1: Add the Image Module
Alright, we are going to start with adding an Image module. Go to your Divi Builder editor, and we will start everything from scratch, so create a section with three columns, select the Image module, and insert that module into the column. Afterward, put an image with portrait orientation into a module.
Step 2: Add the Custom CSS
Next, we will add a simple CSS code to the column. Go to the Column Settings -> Advanced tab -> Custom CSS. Add
height: 275px; into the Main Element field.
Note: When the code is added, the image will be shrunk and look larger than the actual size (see the GIF below).
Once you add the custom CSS, move to this column visibility settings. On the Advanced tab, navigate to Visibility and then set Hidden to the Horizontal Overflow and Vertical Overflow.
Step 3: Setting the Hover
Well, we move on to the last step; hover settings. Go back to the Image Settings -> Design tab -> Spacing.
Add a Margin
Once you enter the Spacing settings, navigate to the Margin, then enable the hover option by clicking the Hover icon. Add
-150px of top margin on the hover state.
Add a Transitions Effect
Still on the Image Settings, navigate to the Advanced tab -> Transitions. In this example, we apply some changes. First, we add.
4000ms (four seconds) for the Transition Duration, and the second is we set the Transition Speed Curve to Ease-Out.
That’s it. Exit from the Divi Builder editor to see the result of your work. If you’re happy with the result (as in the GIF above), you can keep it like this and then save or publish your project if you want to. But, if you want to customize it, you can edit the settings, such as the transition duration value, etc.
The Bottom Line
This article shows how easily you can create the auto-scroll image on hover in Fivi Builder without the help of any plugins. In this tutorial, we used the transition so the animation looks beautiful and smoother, as it would be plain without transition.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.