33 pure-CSS card hover effects for portfolio and product grids, pricing tiers, team profiles, and editorial covers — spanning 3D tilt and parallax, gradient and glass borders, image zoom and slide-up reveals, flip and book-open rotations, holographic foil, neon and scanline glows, glitch splits, and cursor spotlights. Scoped under .card-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Related15 CSS 3D Tilt Hover Cards20 CSS Cards30 CSS Hover Effects36 Tailwind CSS Button Hover Effects
Course pickPartner: Zero to Mastery
Affiliate linkWant to build production-ready CSS layouts, animations and UI from scratch?
You just browsed 33 effects. Learn the Flexbox, Grid and animation thinking behind them, so the next component starts in your head, not in a copy-paste.
Every ZTM course in one membership: $25/month, paid yearly at $299 · 30‑day money-back guarantee
The CSS Bootcamp. We may earn a commission, at no extra cost to you.
Tweak the exact look in our visual generators — no signup, instant copy-paste.
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 (::before / ::after) or a child layer (a border, a gradient, an overlay). Every one of the 33 effects in this gallery is built from this pattern; copy the CSS from any demo's code panel and drop it onto your existing card markup. The Minimalist Elevation demo (#06) is the cleanest reference for the pure-lift pattern — a flat resting state, one :hover rule with translateY(-8px) + a layered multi-step box-shadow, and a CTA arrow that nudges forward.perspective: 1000px so the rotation has depth; (2) on the card, set transform-style: preserve-3d and read the cursor position with a small JS snippet (~15 lines of vanilla JS that listens for mousemove on the card, normalises e.clientX/Y against getBoundingClientRect(), and writes rotateY/rotateX); (3) push child layers (background, badge, title, description, glare) to different translateZ depths so they shift at different rates — that's what gives the parallax depth, not just the rotation. The single-axis Depth Parallax demo (#15) and the simpler 3D Tilt (#17) ship the same pattern at different complexity levels.backdrop-filter: blur(20px) + low-opacity white background tint, (2) a radial-gradient glow positioned at the cursor's X/Y (tracked by ~10 lines of JS that writes --x and --y custom properties), (3) a masked gradient ring via border-image or a pseudo-element with mask-composite: exclude. The glow blooms behind the blur (so the glass softens it) AND the border lights up around the cursor's nearest edge. Add -webkit-backdrop-filter for Safari. For a simpler version, the Frosted Glass Intensify demo (#27) does the blur-deepens-on-hover trick without the cursor tracking.perspective: 1000px, set transform-style: preserve-3d on the card itself, then position .front and .back as siblings with position: absolute; inset: 0 and rotate the back face by rotateY(180deg). Both faces get backface-visibility: hidden so the back doesn't show through the front at rest. On :hover, rotate the whole card by rotateY(180deg) — the back face becomes visible while the front rotates out of view. The demo ships a team-member profile pattern with photo + name on the front, bio + social links on the back. The legacy Flip Card demo (#19) ships a credit-card variant with magnetic strip and CVV.:has() selector with zero JavaScript. The selector reads: .grid:has(.card:hover) .card:not(:hover) { filter: blur(2px); opacity: 0.5; transform: scale(0.96); }. Plain English: 'when the grid contains any hovered card, dim every card that isn't itself hovered.' The hovered card stays sharp and lifts forward (.grid:has(.card:hover) .card:hover { transform: scale(1.04); }), pulling all visual focus to the chosen option. Browser support: Chrome 105+, Safari 15.4+, Firefox 121+ — every current major browser. In older browsers the selector matches nothing and the grid renders normally, no JS fallback needed.:hover with transitions, transforms, pseudo-elements, :has(), and @keyframes. The JS demos degrade gracefully: card content is fully visible and interactive without hover (touch + keyboard users see the resting state), the cursor-tracking only enhances the experience for pointer devices. Every continuous animation respects @media (prefers-reduced-motion: reduce). No library required for any of them.box-shadow — it's layered. The Minimalist Elevation demo (#06) shows the pattern: at rest, a single tight ambient shadow (0 1px 2px rgba(0,0,0,0.06)). On hover, swap to TWO shadows stacked — a tight one for contact (0 4px 12px rgba(0,0,0,0.08)) and a wider, softer one for ambient diffusion (0 16px 40px rgba(0,0,0,0.12)) — combined with translateY(-8px) to lift the card off the surface. The two shadows expand at different rates because light has two falloffs in reality: hard for nearby surfaces, soft for distant ones. Animate both via a single transition: transform 0.3s, box-shadow 0.3s.transform and opacity ONLY — they're GPU-accelerated and skip layout reflow. Avoid animating width, height, margin, or top/left on hover (they trigger reflow and paint every frame). Put the transition on the card's base state so it eases out as well as in. Use will-change: transform on the card sparingly — only when an effect is heavy enough to need it; over-using will-change hurts performance because the browser pre-allocates GPU layers for elements that never animate. Keep transition durations in the 150–350ms range — fast enough to feel responsive, long enough to read as motion.@media (prefers-reduced-motion: reduce) { animation: none }. Triggered transitions on :hover stay (they're user-initiated, not autoplay). Scoped .card-NN class names never collide with your existing styles. All 33 effects are MIT licensed and free for personal AND commercial projects.
20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.
11 pure CSS animation-timeline demos built on the W3C scroll() and view() spec — reading progress bar, view-timeline fade & reveal, shrinking sticky header, stacking cards, horizontal scroll section, parallax hero, container shadow indicators, reverse-scroll columns, text scrim reveal, cover card to sticky header, and image zoom / clip-path wipe. Zero JS, off the main thread, Core Web Vitals safe. Copy-paste ready.
25 hand-coded CSS background animations for SaaS hero sections, developer tool documentation, agency portfolios, gaming and Web3 landing pages, seasonal e-commerce campaigns, and dark-mode dashboards. Covers full-screen gradient shifts, animated mesh gradients, aurora borealis glow, cursor spotlight follow, interactive water ripples, dot grid and diagonal stripe patterns, SVG grain and noise texture overlays, topographic contour lines, layered SVG waves, plasma and lava lamp fluids, bokeh light blur, particle constellation networks, matrix digital rain, synthwave 3D perspective grids, starfield warp speed, CRT scanline overlays, fog and mist drift, morphing organic blobs, floating glassmorphism orbs, halftone dot patterns, starry night skies, floating geometric shapes, rising bubbles, and falling snow. 20 are pure CSS with zero JavaScript; the 5 that need it use vanilla canvas or pointer tracking with no dependencies. Every background animates compositor-only properties so it never blocks the main thread, is scoped under a .bga-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.