--- 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-09-15 lang: en author: "Aditya Sharma" description: "A full-page screenshot is the wrong shape for a web page — shrink it and nothing is readable, show it whole and it swallows the layout. Scrolling Image puts it..." 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: 539 --- # How to Add a Scroll on Hover to an Image in WordPress? ## Key Takeaways - Advanced Image block enables Scrolling Image under Nexter > Blocks, and Nexter Blocks Pro is required for the effect to render; on the free plugin the toggle changes nothing. - Transition Duration sets the whole journey, with the default 2 seconds moving the image from top to bottom while hovering, and a taller image travels faster with the same duration. - Scrolling Image uses Min Height as the window, not the image, so the picture keeps its proportions, is cropped to the window width, and touch screens show only the top because there is no hover. A full-page screenshot is the wrong shape for a web page — shrink it and nothing is readable, show it whole and it swallows the layout. Scrolling Image puts it in a short window and travels down it while the visitor hovers, which is how portfolio and template galleries usually show a whole page. *For every Advanced Image setting in one place, see the [Advanced Image block guide](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/) ## Before You Start - **Edition:** **Pro** — the block itself is free, but **Scrolling Image** only renders with Nexter Blocks Pro. On the free plugin the toggle is there and switching it on changes nothing on the page.- **Block to enable:** Advanced Image, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your image in the Media Library**, at a size large enough for where it will sit. ## Steps - Add the **Advanced Image** block to your page and click **Design from Scratch**. - In the **Content** panel, upload or choose your image, then set **Image Size** and **Alignment**. ![The Content panel with Image Size and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/advimg-image.webp) - Open **Special Options** and switch on **Scrolling Image**. ![Scrolling Image on, with Min Height and Transition Duration](https://nexterwp.com/wp-content/uploads/2026/09/advimg-scrolling.webp) - Set **Min Height** — the height of the window the image travels inside. The default is 400 pixels. - Set **Transition Duration** in seconds. The default 2 is a comfortable pace. - Publish and hover the image. ## How It Behaves - **The travel is measured.** Sampling the page every half second while hovering, the image moved from the very top to the very bottom in the full two seconds: 14%, 53%, 90%, then 100%.- **It runs backwards on mouse-out**, returning to the top.- **Transition Duration is the whole journey**, not a speed — a taller image with the same duration simply travels faster.- **Min Height is the window, not the image.** The image keeps its proportions and is cropped to the window width. ## Limitations - **Pro only.** On the free plugin the toggle does nothing — no scrolling markup is added.- **The picture is painted as a background, not as a real image.** There is no image element on the page in this mode, so it has no alt text and search engines will not index it. Do not use it for images that need to be found or described — keep it for decoration and demos.- **There is nothing to hover on a touch screen**, so phone visitors see only the top of the image. Show a normal image on small screens if the content matters.- A short image in a tall window barely moves; the effect needs an image much taller than Min Height. ## Troubleshooting ### Nothing moves when I hover Either you are on the free plugin, or the image is not much taller than **Min Height** — there is nowhere for it to travel. ### It moves too fast or too slowly Change **Transition Duration**. It sets how long the whole journey takes, so a taller image needs a longer duration to feel the same. ### Nothing happens on my phone There is no hover on a touch screen. This effect is desktop-only by nature. ### The image looks cropped at the sides The window fills its width and crops the rest. Use an image whose width matches the space, or reduce **Max Width** in the Content panel. ## Related Docs - [Advanced Image block: all settings](https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/)- [Image reveal animation on scroll](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/)- [Mask an image to a custom shape](https://nexterwp.com/docs/mask-an-image-in-wordpress-custom-image-mask/) ## Frequently Asked Questions **Q: Why isn’t the image scrolling when I hover it in WordPress?** A: The two usual causes are the free plugin and an image that is not much taller than Min Height. Scrolling Image only renders with Nexter Blocks Pro, so the toggle can appear to work on the free plugin without adding any scrolling markup. It also needs room to travel inside the window, which is why a short image barely moves. A taller source image gives the effect something real to animate. **Q: What do I need before adding a scroll-on-hover image effect?** A: Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Advanced Image block, and Scrolling Image only renders with Nexter Blocks Pro. The page also calls out a large-enough image in the Media Library and says the block should be enabled under Nexter > Blocks in your WordPress dashboard. That matters because the effect depends on both the block and enough image height to travel. **Q: Does scroll-on-hover work on phones or tablets?** A: This effect is desktop-only by nature because there is nothing to hover on a touch screen. On phone visitors, the page says they see only the top of the image. That makes it a bad fit for content that needs to be seen on small screens, so a normal image is better there when the image itself matters. **Q: Why does the image look cropped at the sides?** A: The window fills its width and crops whatever does not fit inside it. That is part of how Scrolling Image keeps the picture moving inside a fixed viewing area instead of expanding the layout. If side cropping looks wrong, use an image whose width matches the space or reduce Max Width in the Content panel so the frame fits better. **Q: How long should Transition Duration be for a tall image?** A: Transition Duration controls how long the whole journey takes, not raw speed. The page’s example uses 2 seconds as a comfortable pace and shows that a taller image with the same duration travels faster because it has more distance to cover. For taller images, longer durations usually feel more natural and less rushed. **Q: Is scroll-on-hover good for images that need alt text or search indexing?** A: No, because this mode paints the picture as a background rather than a real image element. The page says there is no image element on the page in this mode, so it has no alt text and search engines will not index it. That makes it better for decoration and demos than for images that need to be found or described.