Skip to content
tileio

Menu

12 layers · 2 free

Card hover effects: tilt, foil, spotlight, flip and fan

A good card hover effect tells the visitor the card is alive and clickable without getting in the way of what is on it. These twelve cover the effects people search for most: 3D tilt toward the pointer with layers at different depths, a holographic foil sheen, a border that lights up where the pointer is, frosted glass over a moving field, a simple lift with a growing shadow, cards that flip to a back face and a stack that fans out like a hand.

Eight are single components you can drop into any grid; four are whole card grids where the effect spans every card, like one shared spotlight or cards that lean toward the pointer like iron filings.

Copy any of them as a prompt for HTML and CSS, or a Next.js, React, Vue or Astro component. Spotlight Border Card and Profile Card are free.

The 12 layers, in order

  1. A card that tilts toward the pointer in 3D, its image and text at different depths.

  2. A collectible card with a foil finish: tilt it and a rainbow sheen sweeps across in bands.

  3. Feature cards whose borders light up along the edge nearest the pointer.

  4. A frosted-glass card over a moving colour field, with a one-pixel gradient border.

  5. Cards that rise on hover with a growing shadow while the image zooms a touch.

  6. A card that peeks 12° on hover so you know it flips; a click or Enter completes the turn.

  7. A stack of cards held like a hand that fans out along an arc on hover.

  8. A profile card with a banner, an avatar ring, three stats and a Follow button.

  9. A gallery of six cards tilting toward the pointer with a moving glare and layered insides.

  10. A six-card grid lit by one shared spotlight that glows on every nearby border.

  11. Eight cards that lean toward the pointer like iron filings to a magnet.

  12. A grid of cards that flip on their vertical axis, hover on desktop and tap on touch.

Browse the full catalogue: Sections · Elements

Questions

How do I make a 3D tilt card hover effect?

Track the pointer over the card, map its position to small rotateX and rotateY angles, apply them with a perspective on the parent and put inner layers at different translateZ depths. 3D Tilt Card does exactly this, with a glare that moves opposite the tilt.

Can I do card hover effects in pure CSS?

Lift, shadow, zoom and flip work in CSS alone. Tilt, foil and spotlight effects need a few lines of JavaScript to read the pointer position into CSS variables; the prompts keep that script small and self-contained.

Are they free?

Spotlight Border Card and Profile Card are free. Free layers are for personal projects; commercial use needs Pro or Lifetime.

Related collections

All collections