27 CSS Card Hover Effects
Advertisement
A CSS card hover effect is the motion or transformation that fires when a pointer enters a card surface. These 27 hand-coded effects are ready-to-ship microinteractions for product grids, blog tiles, and feature panels — copy the CSS, attach to your existing card markup, and ship.
01 / 27
Elastic Lift
Pure CSS 
Card springs upward with a cubic-bezier overshoot, expands its shadow and highlights the border on hover.
02 / 27
Gradient Border Draw
Pure CSS 
A conic-gradient rainbow border fades in around the card perimeter on hover via an inset pseudo-element.
03 / 27
Stacked Reveal
Pure CSS 
Two ghost cards fan out from beneath the front card on hover using rotate and translate transforms.
04 / 27
Holographic Shimmer
Pure CSS 
A rainbow gradient sweeps across the card on hover using translateX over a multi-colour iridescent base layer.
05 / 27
Curtain Reveal
Pure CSS 
A solid gradient overlay slides upward like a stage curtain to reveal the card content underneath.
06 / 27
Corner Peel
Pure CSS 
The bottom-right corner peels away to reveal a gradient triangle, growing from 0 to 72px on hover.
07 / 27
Neon Sign
Pure CSS 
Border glows and title text pulses with layered neon box-shadows on hover, with a CSS flicker animation.
08 / 27
Scanline
Pure CSS 
CRT-style horizontal scanlines scroll over the card surface on hover using a repeating-linear-gradient animation.
09 / 27
Depth Parallax
CSS + JS 
Three layers — background, mid, and foreground — shift at different speeds as the cursor moves, creating a parallax depth illusion.
10 / 27
Spotlight
CSS + JS 
A soft radial glow follows the cursor around inside the card, illuminating wherever you look.
11 / 27
3D Tilt
CSS + JS 
Mouse position controls live rotateX/rotateY perspective transforms, with a radial shine that follows the cursor.
12 / 27
Slide Up Content
Pure CSS 
Extra description and a CTA animate into view from below the title on hover using max-height and translateY.
13 / 27
Flip Card
Pure CSS 
Pure CSS 3D card flip on hover using transform-style: preserve-3d and backface-visibility: hidden on both faces.
14 / 27
Glitch Card
Pure CSS 
Two colour-shifted clones with clip-path flicker on hover in opposite directions, simulating a digital signal glitch.
15 / 27
Gradient Rotate
Pure CSS 
The card border becomes a conic-gradient that hue-rotates continuously on hover, cycling the full spectrum.
16 / 27
Border Morph
Pure CSS 
The card border-radius morphs to an organic blob shape and scales up on hover with a spring cubic-bezier.
17 / 27
Magnetic Float
Pure CSS 
Three orbit dots scatter to different positions on hover with spring easing, while the card floats upward.
18 / 27
Typewriter Reveal
Pure CSS 
A hidden line types in from zero width using max-width transition, with a blinking terminal cursor via CSS animation.
19 / 27
Overlay Slide
Pure CSS 
A full gradient overlay slides in from the left on hover, revealing a CTA that fades in with a stagger delay.
20 / 27
Grain Texture
Pure CSS 
An SVG noise layer animates in with mix-blend-mode: overlay on hover, giving the card an organic film grain texture.
21 / 27
Frosted Glass Intensify
Pure CSS 
Backdrop-filter blur and saturation ramp up from 0 to 14px on hover, intensifying a frosted glass effect over coloured orbs.
22 / 27
Blueprint Reveal
Pure CSS 
Engineering blueprint aesthetic: a dot grid and corner crosshair marks fade in on hover, with title and body shifting to cyan.
23 / 27
Shockwave
Pure CSS 
Two concentric ring pulses expand outward from the card border on hover, like a shockwave ripple effect.
24 / 27
Color Burn
Pure CSS 
A radial gradient bloom erupts from the bottom-left corner and expands to fill the entire card on hover.
25 / 27
Prismatic Sweep
Pure CSS 
Three skewed colour beams sweep across the card in a staggered sequence, like light through a prism.
26 / 27
Book Open
Pure CSS 
The card cover folds open like a book page using perspective rotateY, revealing hidden content on the reverse page.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
How do I add a hover effect to a card in CSS?
Put a transition on the card's resting state, then change a property on :hover — most commonly transform: translateY(-6px) for a lift, plus a deeper box-shadow. For richer effects, animate a pseudo-element or a child layer (a border, a gradient, an overlay). Every one of the 27 effects here is built from this pattern; copy the CSS from any demo's code panel.
How do I make a 3D tilt card hover effect?
Give the card's parent perspective, and on hover rotate the card with rotateX and rotateY based on the pointer position. A pure-CSS approximation uses fixed rotation values; a true pointer-following tilt reads the cursor's X/Y and maps it to the rotation, which needs a small JavaScript snippet. The 3D-tilt demos here include that snippet, self-contained, in the JS tab.
Do these CSS card hover effects need JavaScript?
Most are pure CSS — :hover with transitions, transforms, pseudo-elements and @keyframes. A handful of effects that follow the cursor (pointer-tracking tilt, spotlight) use a few lines of vanilla JS; where used, it's included with the demo. No libraries or frameworks are required for any of them.
How do I keep card hover effects smooth and not janky?
Animate transform and opacity only — they're GPU-accelerated and skip layout reflow. Avoid animating width, height, margin or top/left. Put the transition on the card's base state so it eases out as well as in, use will-change sparingly, and keep durations in the 150–350ms range so the card feels responsive.
Are these card hover effects accessible and free to use?
Yes. Hover effects are progressive enhancement — the card content is fully usable without hover, so touch and keyboard users lose nothing. Continuous motion honours prefers-reduced-motion. All 27 effects are MIT licensed and free for personal and commercial projects.
Related collections
21 CSS Button Hover Effects
21
21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.
buttons hover animation
Responsive
20 CSS Link Hover Effect Designs
20
20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
css link hover link effects underline animation
Responsive
15 Pure CSS Loading Animations
15
15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.
loading spinner animation
Responsive