Hover Image Trail — Free HTML CSS JS Cursor Effect Snippet

The hover image trail is the interactive showpiece on creative portfolios and agency sites: as you move the cursor across a section, a stream of images appears along the path, each popping in with a little rotation and then fading away behind the pointer. This snippet builds the complete effect in plain HTML, CSS, and vanilla JavaScript, with the key detail that makes it feel right — the trail is spaced by distance traveled, not by time.

Distance-based spawning

The naive version drops an image on every mousemove event, which floods the screen when you move slowly and leaves gaps when you move fast. Instead, this snippet tracks the last spawn position and only releases a new image once the pointer has traveled past a threshold of 70 pixels, measured with Math.sqrt(dx*dx + dy*dy). The result is an evenly spaced trail no matter how quickly or slowly the cursor moves — the images mark out the path's geometry rather than its timing.

A pool of recycled images

Rather than creating and destroying DOM nodes constantly, the snippet builds a fixed pool of eight <img> elements once and cycles through them with a modulo index (idx % imgs.length). Each spawn reuses the next image in the pool, repositions it under the pointer, and replays its animation. Reusing a small pool keeps the DOM stable and avoids the garbage-collection churn of endlessly appending and removing elements.

Replaying the CSS animation

Each image's entrance is a single hiPop keyframe that scales it up from 0.4×, snaps any rotation back to straight, then fades out while drifting down and counter-rotating. To make the same element replay its animation on every reuse, the code removes the show class, forces a reflow by reading offsetWidth, then re-adds the class. That void img.offsetWidth line is the classic trick to restart a CSS animation — without it the browser coalesces the class changes and the animation never re-triggers.

Per-image randomized rotation

Each spawn sets a CSS custom property --r to a random angle between -13° and 13°. The keyframe reads --r so every image enters at a slightly different tilt and exits counter-rotating, which keeps the trail organic instead of looking like identical stamps. Because the randomness lives in a CSS variable, the animation itself stays a single shared keyframe.

Dependency-free image tiles

So the snippet runs with zero assets, each "photo" is generated as an inline SVG gradient encoded as a data URI. In a real build you'd point each pool image's src at actual photos — the spawning, spacing, and animation logic doesn't change. The images are pointer-events: none so they never intercept the cursor, and the heading is too, so movement tracking is uninterrupted.

Touch support

A touchmove listener (registered passive) feeds the same onMove function using the first touch point, so dragging a finger across the stage produces the same trail on mobile. The stage sets touch-action: none so the gesture isn't hijacked by the browser's scroll.

Customizing it

Lower the threshold for a denser trail or raise it for a sparser one, change the image dimensions, lengthen the hiPop duration for slower fades, or widen the random rotation range for more chaos. Swap the SVG tiles for your portfolio images and you have a signature landing interaction. Pair it with a sparkles text headline or a custom cursor for a fully bespoke pointer experience.