33 CSS Card Hover Effects

Q: 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 ( ::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.

Q: How do I blur and dim sibling cards when one is hovered using CSS :has()?

The Sibling De-emphasis demo (#05) uses the modern :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.

Q: How do I add minimalist elevation shadows that feel real?

Real-feeling elevation isn't one 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 .

Q: 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 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.

#csscards

A CSS card hover effect is the motion or transformation that fires when a pointer enters a card surface. These 33 hand-coded effects span the full microinteraction range: a multi-axis 3D tilt card with cursor parallax across layered Z-depth planes, a glowing gradient glassmorphic border that tracks the pointer, an image zoom with a frosted detail panel sliding up from the bottom, a front-to-back 3D flip for team profile cards, a CSS :has() sibling de-emphasis that blurs every non-hovered card in a pricing grid, a minimalist elevation with layered multi-step shadows — plus a bouncy elastic lift, a holographic foil shimmer, an animated @property conic-gradient border, a glassmorphism card whose backdrop-filter blur intensifies on hover, a glitch card with RGB channel split, a spotlight that follows the cursor, a magnetic float, a blueprint reveal, an aurora drift and more. 26 are pure CSS; 7 add a short vanilla JS snippet for cursor tracking. Each demo ships with semantic HTML, scoped .card-NN class names that never collide with your existing styles, prefers-reduced-motion fallbacks, and MIT licensing — copy from any code panel and drop onto your existing card markup.

26 pure CSS7 light JSPublished May 4, 20266 new designs · Updated on Jun 3, 2026

01 / 33CSS + JSNEW

3D Tilt & Parallax Card Effects

A premium portfolio card that follows the cursor's orientation in real 3D, with the background, badge, title, and description each pushed onto separate Z-axis depth planes so they shift at different rates as you move. A specular glare tracks the pointer across the surface, making the whole card feel like a physical, light-catching object — ideal for featured work, showcase grids, and hero web-app cards.

PublishedJun 3, 2026

02 / 33CSS + JSNEW

Glowing Gradient & Glassmorphic Borders

A dark web3/crypto wallet card on a frosted-glass surface where a vibrant teal-to-violet radial glow blooms behind the blur and a matching neon border lights up, both tracking the cursor around the edges. Built with backdrop-filter and a masked gradient ring, perfect for crypto dashboards, staking widgets, and dark-themed SaaS landing pages that want an energetic, high-tech edge.

PublishedJun 3, 2026

03 / 33Pure CSSNEW

Image Zoom with Content Reveal / Slide-Up

A clean e-commerce product card showing only the image and a small badge at rest. On hover, the image scales up smoothly inside an overflow:hidden frame while a frosted detail panel — name, price, description, and a "View Product" CTA — slides up from a peeking strip at the bottom. A dependable workhorse for shop grids, blog post cards, and directory listings.

PublishedJun 3, 2026

04 / 33Pure CSSNEW

3D Flip Cards (Front to Back)

A team-member profile card that rotates a full 180° on the Y-axis using perspective and backface-visibility, flipping from a photo-and-name front to a back face with bio and social links. Space-efficient and tactile, it suits team pages, flashcard apps, pricing tiers, and anywhere two sides of information share one footprint.

PublishedJun 3, 2026

05 / 33Pure CSSNEW

Parent Blur / Sibling De-emphasis (Focus States)

A pricing grid where hovering one card scales it up and brings it forward, while modern :has() and :not(:hover) selectors automatically blur and dim every neighboring card — pulling all attention to the chosen option with zero JavaScript. Best for pricing tables, minimalist galleries, and any multi-column layout where guiding focus matters. (Note: this demo intentionally renders three cards, since the effect only reads with siblings present.)

PublishedJun 3, 2026

06 / 33Pure CSSNEW

Minimalist Elevation & Dynamic Shadows

A clean corporate/SaaS documentation card that sits nearly flat at rest, then lifts on hover with a translateY shift and a layered, multi-step box-shadow that expands to mimic a real card rising off the page. A small arrow nudges forward on the CTA for a final touch of polish. Ideal for SaaS marketing sites, docs platforms, and restrained UI systems where subtlety is the point.

PublishedJun 3, 2026

07 / 33Pure CSS

Elastic Lift

A coffee brand card that springs upward on hover with a bouncy, overshooting cubic-bezier curve and a warm ember glow rising from below. The elastic timing makes the lift feel physical and tactile rather than a flat translate — ideal for product or menu cards where you want a friendly, energetic response.