---
title: "How to Add a Scroll on Hover to an Image in WordPress?"
url: https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/
date: 2024-12-09
modified: 2026-04-14
author: "Aditya Sharma"
description: "Would you like to make your WordPress images scroll smoothly? This feature is great for displaying long portfolio images, allowing them to fit neatly into smaller sections of your website...."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Scroll-on-Hover-to-an-Image-in-WordPress_-1024x519.jpg
word_count: 195
---

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

## Key Takeaways

- Nexter Blocks includes the Advanced Image block, which allows users to add a scrolling effect on hover to images in WordPress.
- Users can enable the Scrolling Image toggle from the Special Options tab after adding an image to the Advanced Image block.
- The Transition Duration field lets users adjust the scrolling speed of the image effect.

Would you like to make your WordPress images scroll smoothly? This feature is great for displaying long portfolio images, allowing them to fit neatly into smaller sections of your website. Adding a scrolling effect to images can make your design more dynamic and catch the attention of your audience. 

With the Advanced Image block from Nexter Blocks, you can easily add a scrolling effect on hover to your image in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Advanced Image block, [click here](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/)

To do this, add the Advanced Image block to the page and follow the steps -

1. Add your image in the **Upload Image** section.

2. Then enable the **Scrolling Image** toggle from the **Special Options** tab.

3. 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.

## Frequently Asked Questions

**Q: What if the scrolling effect doesn't work on my image?**
A: If the scrolling effect isn't functioning, ensure that the Advanced Image block from Nexter Blocks is installed and activated. This block is essential for enabling the scrolling feature. Additionally, check that you have correctly set the Min Height to a value smaller than the original image height. If these settings are correct and it still doesn't work, try refreshing the page or clearing your browser cache.

**Q: What is the best scrolling speed for images?**
A: The best scrolling speed for images depends on the visual effect you want to achieve. You can adjust the scrolling speed using the Transition Duration field in the settings. A slower speed may provide a more dramatic effect, while a faster speed can create a more subtle interaction. Experiment with different settings to find the right balance for your design.

**Q: Does the scrolling effect work on mobile devices?**
A: The page does not specify mobile compatibility for the scrolling effect. However, it's essential to test the scrolling feature on various devices to ensure it provides a good user experience. Sometimes, effects that work well on desktop may not translate effectively on mobile, so consider the layout and usability when implementing this feature.

**Q: What happens if I set the Min Height too high?**
A: Setting the Min Height too high can prevent the scrolling effect from activating. The Min Height should be smaller than the original image height to allow for the scrolling feature to function properly. If the Min Height is equal to or greater than the original height, the image may not scroll at all, which defeats the purpose of adding this effect.