What is an image trail effect?
It's a playful, editorial mouse interaction seen on fashion, photography and studio sites. As the cursor moves across an area, images pop up at intervals along its path, scale in, and fade out in sequence. The faster you move, the longer the trail.
It turns a static hero or project list into something visitors want to play with, and it shows many images without a gallery grid.
How to add an image trail in Elementor
- Choose the container where the trail should appear (usually a hero).
- Drag the Image Trail widget inside it.
- In Trail Images, add the pictures you want to cycle through.
- In Animation, set the image size, the spawn distance (how far the cursor moves before the next image appears), the fade duration and how many images can be visible at once.
- Choose whether the trail goes behind your content or on top of it.
- Publish and move the mouse over the container.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Image height | Size of each trail image | 200 px |
| Spawn distance | Cursor distance between two images | 80 px |
| Fade duration | How long each image takes to disappear | 800 ms |
| Max visible | Maximum images on screen at the same time | 8 |
| Scale effect | Starting scale of each image as it appears | 0.8 |
| Border radius | Corner radius of the images | 8 px |
| Trail behind content | Put the trail under your text and buttons | Off |
Tips
- Use 6–12 images with a consistent style or color palette — the trail reads as one story.
- Put a big headline on top and turn on Trail behind content, so the text stays readable.
- Keep the images light: they're preloaded to appear instantly.
Performance and accessibility
The effect runs with a small requestAnimationFrame loop — about 7 KB before minification, no animation library — and respects the visitor's reduced motion setting. On touch screens there's no cursor, so plan the hero to look good without the trail too.
Related effects
- Custom Cursor (Follower) — a circle that follows the pointer across the site.
- Magnetic Button — buttons that pull toward the cursor.
- Expanding Cards — image cards that open on hover.
