Modules Cursor Images
Cursor Image Trail & Hover Image
Images that follow the mouse. A row or column can leave a trail of images behind the pointer, and any module can show an image next to it, such as a project photo over its title. Images come from the Media Library, a connected field or the posts of a Themer Loop.
↯ Move your mouse across this hero, then scroll down: a trail above the content, a trail made of the images in the row, a hover list of posts and hover images on any module.
You are on a touch screen, so these effects are off on purpose. Open this page on a computer with a mouse or trackpad to try them.
Live demo · Pro · Row
An image trail, above the content
This row's Kinetic tab has Cursor Image Trail on with seven chosen images, Random tilt, 220 px wide, one image every 80 px, nine at once. The hero above uses the same section with the trail behind its content.
Move your mouse here
Fast moves leave more images; slow moves leave fewer.
Live demo · Pro · Row + Loop module
A trail of the images already in the row
Set Images to Images inside this row or column and the trail reuses what the row shows: here the featured images of a Themer Loop module with six Showcase posts. The effect is Drop, behind the content.
Live demo · Pro · Hover Image in a Loop
Point at a project
A Loop module lists the posts as big titles. Each title is a Heading with Hover Image on; its image is connected to the featured image and its caption to the excerpt, so every post shows its own. Effect: Reveal (wipe up), 4:3, 340 px.
Live demo · Pro · Hover Image on a Loop module
One setting for the whole Loop
Here Hover Image is on the Loop module itself, with no image chosen: each post card shows its own featured image, centred on the pointer with Scale up. Cards with text only, no image to build.
-
A calmer identity for a Nordic outdoor brand, rolled out across forty pages in a week.
-
Onboarding screens that teach by moving, without a single tooltip.
-
Six blends, one system: colour does the talking on the shelf.
-
A dashboard that loads in stages, so the numbers that matter land first.
-
Full-bleed photography and long reads for an award-winning studio.
-
A ticket site built around one bold, looping marquee.
Live demo · Pro · Any module
Hover images on any module
Three HTML modules, each with its own chosen image and a typed caption. Effect: Tilt with movement, follow: Tight.
Wireframe
Boxes and words first.
Design
Colour, type and imagery.
Final
Built in Beaver Builder.
How to use it
Where to find it
- Rows and columns: Kinetic tab → Cursor Image Trail. Choose images (or connect a gallery field), or use the images inside the row. Set the width, the distance between images, how long each stays, how many at once, the effect (fade, shrink, drop, random tilt), the corner radius and whether the trail sits above or behind the content.
- Any module: Kinetic tab → Hover Image. Pick an image or connect it to a field, add an optional caption (also connectable), then the width, shape, effect (fade, scale up, wipe up, tilt), position and how closely it follows.
- Themer Loop: on a module inside a post, connect the image to the featured image; on the Loop module itself, leave the image empty and each post shows its own featured image.
Both effects are decorative: the images are hidden from screen readers and never block a click. They only run with a mouse or trackpad, never on touch screens, for visitors who prefer reduced motion or in the builder. Images load when the row comes near the screen.
Good to know
- Off on touch screens and with reduced motion, by design
- Off in the builder, so editing stays calm
- Hidden from screen readers; links and buttons stay clickable
- Works in Loop items and Components, each copy on its own
Pro Pro adds
- Cursor Image Trail for rows and columns
- Hover Image for every module
- Field connections for images and captions
- Featured images of Loop posts, with no setup
Kinetic Modules
Make your Beaver Builder sites move.
Start with the free plugin. Add Pro when a project needs the big effects.