Playground · 27 demos
CSS Card Hover Effects Playground
Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.
Or browse the full CSS Card Hover Effects collection for the gallery view with code panels.
01 Pure CSS
Elastic Lift
Card springs upward with a cubic-bezier overshoot, expands its shadow and highlights the border on hover.
Open
02 Pure CSS
Gradient Border Draw
A conic-gradient rainbow border fades in around the card perimeter on hover via an inset pseudo-element.
Open
03 Pure CSS
Stacked Reveal
Two ghost cards fan out from beneath the front card on hover using rotate and translate transforms.
Open
04 Pure CSS
Holographic Shimmer
A rainbow gradient sweeps across the card on hover using translateX over a multi-colour iridescent base layer.
Open
05 Pure CSS
Curtain Reveal
A solid gradient overlay slides upward like a stage curtain to reveal the card content underneath.
Open
06 Pure CSS
Corner Peel
The bottom-right corner peels away to reveal a gradient triangle, growing from 0 to 72px on hover.
Open
07 Pure CSS
Neon Sign
Border glows and title text pulses with layered neon box-shadows on hover, with a CSS flicker animation.
Open
08 Pure CSS
Scanline
CRT-style horizontal scanlines scroll over the card surface on hover using a repeating-linear-gradient animation.
Open
09 CSS + JS
Depth Parallax
Three layers — background, mid, and foreground — shift at different speeds as the cursor moves, creating a parallax depth illusion.
Open
10 CSS + JS
Spotlight
A soft radial glow follows the cursor around inside the card, illuminating wherever you look.
Open
11 CSS + JS
3D Tilt
Mouse position controls live rotateX/rotateY perspective transforms, with a radial shine that follows the cursor.
Open
12 Pure CSS
Slide Up Content
Extra description and a CTA animate into view from below the title on hover using max-height and translateY.
Open
13 Pure CSS
Flip Card
Pure CSS 3D card flip on hover using transform-style: preserve-3d and backface-visibility: hidden on both faces.
Open
14 Pure CSS
Glitch Card
Two colour-shifted clones with clip-path flicker on hover in opposite directions, simulating a digital signal glitch.
Open
15 Pure CSS
Gradient Rotate
The card border becomes a conic-gradient that hue-rotates continuously on hover, cycling the full spectrum.
Open
16 Pure CSS
Border Morph
The card border-radius morphs to an organic blob shape and scales up on hover with a spring cubic-bezier.
Open
17 Pure CSS
Magnetic Float
Three orbit dots scatter to different positions on hover with spring easing, while the card floats upward.
Open
18 Pure CSS
Typewriter Reveal
A hidden line types in from zero width using max-width transition, with a blinking terminal cursor via CSS animation.
Open
19 Pure CSS
Overlay Slide
A full gradient overlay slides in from the left on hover, revealing a CTA that fades in with a stagger delay.
Open
20 Pure CSS
Grain Texture
An SVG noise layer animates in with mix-blend-mode: overlay on hover, giving the card an organic film grain texture.
Open
21 Pure CSS
Frosted Glass Intensify
Backdrop-filter blur and saturation ramp up from 0 to 14px on hover, intensifying a frosted glass effect over coloured orbs.
Open
22 Pure CSS
Blueprint Reveal
Engineering blueprint aesthetic: a dot grid and corner crosshair marks fade in on hover, with title and body shifting to cyan.
Open
23 Pure CSS
Shockwave
Two concentric ring pulses expand outward from the card border on hover, like a shockwave ripple effect.
Open
24 Pure CSS
Color Burn
A radial gradient bloom erupts from the bottom-left corner and expands to fill the entire card on hover.
Open
25 Pure CSS
Prismatic Sweep
Three skewed colour beams sweep across the card in a staggered sequence, like light through a prism.
Open
26 Pure CSS
Book Open
The card cover folds open like a book page using perspective rotateY, revealing hidden content on the reverse page.
Open
27 CSS + JS
Aurora
Two blurred light orbs track cursor position independently, creating a living aurora borealis inside the card.
Open