A full-page screenshot or a long portfolio piece is awkward on a web page: show it whole and it dominates the layout, crop it and visitors never see the rest.
Scroll Image in the Creative Image widget solves that. It puts the tall picture in a short, fixed-height frame and pans smoothly from the top to the bottom while the pointer is over it.
To check the complete feature overview documentation of The Plus Addons for Elementor Creative Image widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Creative Image is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Creative Image, switched on under The Plus Addons > Widgets (in the Advanced group there). In the Elementor panel it appears under Plus Advanced.
- You need an image: pick one in Choose Image first. With nothing chosen the widget renders the plugin’s own grey placeholder, so none of the effects below will look like anything.
- Use a tall image: the effect only has somewhere to travel if the picture is taller than the frame you give it. A full-page screenshot or a long mock-up is ideal.
Set Up the Scrolling Image
- Add the Creative Image widget to the page.
- Choose your tall picture in Choose Image. Either Image Style works.
- Open the Style tab and switch Scroll Image on in the Style Image section.
- Set Min Height to the height of the frame you want — this is what makes it a window rather than the whole image.
- Set Transition Duration to control how slowly it pans.
The Two Settings
| Setting | What it does | Default |
|---|---|---|
| Min Height | The height of the visible frame, in pixels, per device. Make it shorter than the image would otherwise be, or there is nothing to scroll. Accepts 5 to 1200. | 400 |
| Transition Duration | How many seconds the pan takes, in each direction. Accepts 0.1 to 10. | 2 |
The picture is scaled to cover the frame, so the frame’s width crops the sides of a very narrow image. Judge the result at the width the widget will really have.
What Visitors See
At rest the frame shows the top of the image. While the pointer is over it the picture slides until the bottom is showing, taking as long as Transition Duration says. Moving the pointer away runs it back to the top.
How It Behaves
- The pan is driven by CSS hover, so it needs a real pointer. On a touch screen there is no hover state and the frame simply shows the top of the image.
- The effect runs on the published page; the Elementor editor shows the cropped frame but does not pan it.
- Min Height is responsive, so you can give the frame a different height on tablet and mobile.
Limitations
- The image stops being an image. Scroll Image renders the picture as a CSS background instead of an
<img>tag. Its alt text is not on the page, so do not use this for a picture that carries meaning on its own. - Image Animation does nothing while Scroll Image is on. The animation targets the image tag, and there isn’t one. The editor gives no warning.
- Image Resolution has no effect here — the full-size file is used as the background whatever you pick.
- No hover on touch devices, so mobile visitors see a static crop.
Troubleshooting
Nothing pans when I hover
Check the published page rather than the editor, and check Min Height is shorter than the image’s natural height in that container. If the whole picture already fits, there is nothing to scroll to.
The sides of my image are cut off
The picture is scaled to cover the frame. Lower Min Height, widen the container, or crop the image to a narrower shape before uploading.
It pans too fast to follow
Raise Transition Duration. The default is 2 seconds; 4 to 6 suits a very long screenshot.
My GSAP image animation stopped working
Switch Scroll Image off. The two cannot be used on the same widget.
