Parallax Tilt Card — Free HTML CSS JS Depth Hover Snippet

The parallax tilt card goes beyond a simple 3D tilt: as the card leans toward your cursor, its stacked content layers each shift by a different amount based on their assigned depth, so the badge, artwork, and text float at visibly different distances — real parallax rather than a flat plane being skewed. This snippet builds it with plain HTML, CSS, and one vanilla JavaScript pointer handler.

Depth-tagged layers

The card contains several absolutely-positioned layers — a background glow, a badge, a large emblem, and the foreground text — each carrying a data-depth value (6, 18, 34, 50). That number is how far the layer should move relative to the cursor: small for the deep background, large for the foreground. Storing depth as a data attribute keeps the parallax declarative — you tune the layering by editing numbers in the HTML, not the script.

Tilt plus per-layer shift

On pointermove, the handler converts the cursor position to -0.5…0.5 fractions. It applies a rotateY/rotateX tilt to the whole card (inside a perspective: 1000px stage with preserve-3d), then loops the layers and translates each by -px * depth, -py * depth. Because the translation is proportional to depth, foreground layers slide much further than background ones for the same cursor movement — which is exactly how parallax works in the real world, where near objects appear to move more than far ones. The opposite-direction shift (negative) makes the layers counter the tilt, deepening the 3D.

The soft-light shine

A .pt-shine layer is a radial highlight whose center follows the cursor via --sx/--sy custom properties, set from the same handler. It uses mix-blend-mode: soft-light so the highlight brightens the card's existing colors like a real reflection rather than overlaying opaque white, and it fades in on hover. This adds a glossy sheen that reads as light catching the tilted surface.

Smooth, GPU-friendly motion

Every animated element — the card and each layer — has a short transition and will-change: transform, so the motion eases rather than jitters with each raw pointer event, and the transforms are composited on the GPU. On pointerleave the card and all layers reset to neutral, springing back to flat.

Why depth attributes beat hard-coding

Driving the parallax from a per-layer data-depth means the same short loop handles any number of layers at any depths. Add a fourth content layer, give it a depth, and it joins the parallax automatically — no new code. It also makes the effect easy to tune: nudge the numbers to exaggerate or flatten the sense of space.

Customizing it

Adjust the tilt multiplier (16) for a stronger or gentler lean, change each layer's data-depth to restage the parallax, recolor the glow and shine, or swap the emoji emblem for an image or icon. Replace the content with a real product or collectible. Pair it with a glare card or a pin card for a set of dimensional cards.