---
title: "How to Add a Scroll on Hover to an Image in Elementor?"
url: https://theplusaddons.com/docs/add-a-scroll-on-hover-to-an-image-in-elementor/
date: 2024-05-10
modified: 2026-04-09
author: "Aditya Sharma"
description: "Would you like to make your Elementor images scroll smoothly? This can be useful for displaying long portfolio images, making them fit in small sections on your website. Adding such..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-a-Scrolling-Effect-to-an-Image-in-Elementor_-4-1024x536.jpg
word_count: 219
---

# How to Add a Scroll on Hover to an Image in Elementor?

## Key Takeaways

- Creative Image widget from The Plus Addons for Elementor adds a scrolling effect on hover to images.
- Users can adjust the scrolling speed using the Transition Duration field in the Creative Image widget settings.
- The image height in the Min Height section must be set smaller than the original image height for the scrolling effect to work.

Would you like to make your Elementor images scroll smoothly? This can be useful for displaying long portfolio images, making them fit in small sections on your website. Adding such scrolling effect on images can make your design stand out and grab the attention of your audience.

With the Creative Image widget from The Plus Addons for Elementor, you can easily add a scrolling effect on hover to your image in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, [click here.](https://theplusaddons.com/docs//creative-image-widget/)*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/)

To do this add the Creative Image widget to the page and follow the steps.

1. Select the appropriate option from the **Image Style** dropdown.

2. Then add your image in the **Choose Image** section.

3. Then enable the **Scroll Image** toggle from the **Style** tab.

![](https://theplusaddons.com/wp-content/uploads/2024/05/creative-image-scroll-image.png)

4. In the **Min Height** section, you have to set the image height, it should be smaller than the original image height.

Then you can adjust the scrolling speed from the **Transition Duration** field. 

Now, you’ll see a scrolling effect as you hover on the image.

***Suggested Reading***: *[How to Add a Parallax Image in Elementor?](https://theplusaddons.com/docs//add-a-parallax-image-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if the scrolling effect isn't working on my image?**
A: If the scrolling effect isn't working, check that you've enabled the Scroll Image toggle in the Style tab. This toggle must be activated for the effect to function. Additionally, ensure that the Min Height is set smaller than the original image height, as this is crucial for the scrolling effect to display correctly.

**Q: What is the best height setting for the scrolling effect?**
A: The best practice is to set the Min Height to be smaller than the original image height. This ensures that the scrolling effect is visible and works as intended. Adjusting this setting correctly is essential for achieving the desired visual impact.

**Q: Does the Creative Image widget work with other page builders?**
A: The Creative Image widget is specifically designed to work only with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, this widget can significantly enhance your image display capabilities.