AI CSS Animations

CSS Card Hover Effects

62 CSS card hover effects for product, profile, pricing and blog cards: lifts, tilts, flips, content reveals, glowing borders and image zooms.

Card Lift

The whole card lifts and its shadow deepens, the standard hover for anything clickable in a grid. Two properties transition; nothing inside the card moves.

card · lift · tailwind

3D Tilt Card

The card tips back and to the side in 3D as if pushed at one corner. Pure CSS tilts in a fixed direction; it does not follow the cursor, and it does not need to.

card · 3d

Image Zoom Card

The cover image scales up inside its frame while the frame stays put, a cinematic push-in. The image container clips the overflow so nothing spills.

card · image · tailwind

Caption Reveal Card

A caption panel slides up over the image on hover, the classic portfolio and gallery treatment. The panel is inside the image frame so it never changes the card's height.

card · image · overlay

Spinning Gradient Border Card

A conic gradient border spins around the card while you hover. The angle is a registered custom property, which is what makes a gradient animatable at all.

card · border · gradient

Flip Card

The card turns over to show its back. Front and back are stacked faces with backface-visibility hidden inside a 3D-preserving wrapper, so both sides render crisply.

card · 3d

Card Shine

A diagonal sheen crosses the whole card on hover, the same trick as the shine button but scaled up. Works especially well on dark cards and pricing tiers.

card · shine

Content Rise Card

The title sits low on the image; on hover it rises and a description fades in beneath it. Everything is positioned inside the image, so the card's footprint never changes.

card · image · overlay

Glass Card

A frosted-glass card whose blur and border brighten on hover. The frost comes from backdrop-filter, so it looks best over a colorful or busy background.

card · glass · dark

Pricing Card Hover

A pricing tier lifts, picks up an accent ring, pops a Popular badge and fills its button. The ring is a spread box-shadow, so the border never nudges the layout.

card · border · shadow

Profile Card Social Icons Hover

A profile card whose role line slides away and a row of social icons springs up in its place, one after another. The swap happens in a fixed-height slot, so the card never resizes.

card · social · reveal

Product Card Add to Cart Hover

An online store product card: the item lifts and tilts while an Add to cart button slides up from the bottom of the photo. It also opens on keyboard focus through :focus-within.

card · button · reveal · tailwind

Blog Card Hover

A horizontal blog card: the thumbnail pushes in, the headline gets an underline that runs line by line, and the read link arrow nudges. The underline is a background on an inline span.

card · underline · image

Expanding Card Hover

A compact card that grows to reveal an extra paragraph while its chevron turns. It animates grid-template-rows from 0fr to 1fr, so the height is measured for you with no max-height guess.

card · reveal · minimal · tailwind

Stacked Cards Fan Out Hover

A small stack of photo prints that fans out on hover, the back two swinging to either side on a springy curve. One custom property per card drives both its resting tilt and its fan angle.

card · image · playful

Glow Behind Card Hover

A soft, blurred gradient blooms out from behind the card and slowly drifts while you hover. The glow is a blurred pseudo-element under a solid inner card, so the content stays crisp.

card · glow · gradient

Border Beam Card Hover

Two short beams of light chase each other around the card's outline while you hover. An SVG rect with pathLength 100 turns the dash pattern into percentages of the perimeter.

card · border · glow

Corner Ribbon Card Hover

A diagonal Sale ribbon slides into the card's top corner with a little overshoot as the card lifts. The ribbon waits just outside the corner and the card's overflow hides it until then.

card · reveal · playful

Spotlight Card Hover

A dark card where a soft spotlight glides in from the corner and settles at the top, lighting the border as it passes. Two registered @property percentages move one radial gradient.

card · glow · gradient

Bouncing Icon Card Hover

A feature card whose icon tile fills with the accent and does one squash-and-stretch hop. Each keyframe sets its own easing, so the jump slows at the top and lands with a squash.

card · icon · playful

Testimonial Card Hover

A customer quote card: the big quote mark swings into the accent color and the five stars pop in one after another. The star shape is a clip-path polygon, so there is no icon font.

card · icon · playful

Pop Out Card Hover

A hot air balloon rises out of its photo and floats above the card's top edge. The scene clips itself but the card does not, so the balloon can break the frame with no 3D transforms.

card · image · playful

Side Overlay Card Hover

An accent panel slides across the photo from the left while the photo drifts the other way, then its lines arrive one by one. Good for listings where the details matter more than the picture.

card · overlay · reveal

Parallax Card Hover

The landscape in the card splits into layers that slide at different speeds: the sun rises, the far ridge barely moves, the near hills sweep past. Pure transforms on three stacked shapes.

card · image

Bottom Border Card Hover

An accent bar grows along the bottom edge from the left and leaves to the right when you move away. Swapping transform-origin between the two states gives it that direction.

card · border · minimal · tailwind

Dot Grid Card Hover

A faint dot grid in the card's corner spreads across it and starts drifting diagonally on hover. The dots are one radial-gradient tile and the drift moves exactly one tile, so the loop is invisible.

card · gradient · minimal

Arrow Link Card Hover

A whole-card link whose corner arrow flies out to the top right while a fresh one slides in from the bottom left, and the circle behind it fills. Two copies of one SVG do the swap.

card · link · icon

Neon Sign Card Hover

A dark card with an unlit neon tube for a border and title. On hover the tube stutters on like a real sign, then holds a steady glow. One keyframe set drives both the tube and the lettering.

card · neon · glow

Neo Brutalist Card Hover

A flat card with a thick outline and a hard offset shadow that grows and turns accent as the card shifts up and left, then presses flat on click. No blur anywhere, which is the whole look.

card · shadow · playful · tailwind

Corner Border Card Hover

Four accent corner brackets stretch along the edges until they meet and close the frame. It is eight background layers on one pseudo-element, and background-size is the only thing that moves.

card · border · minimal

Notification Card Hover

A notification row that nudges sideways as its bell rings with a damped swing, and the timestamp trades places with a dismiss button. The bell pivots from its top, like the real thing.

card · icon · playful

Stat Card Sparkline Hover

A dashboard stat card whose sparkline draws itself in the accent over a faint copy, then fills its area and pops an end dot. pathLength 100 makes the stroke-dashoffset draw size-proof.

card · reveal · minimal

Circle Fill Card Hover

The accent circle behind the icon grows until it floods the whole card, and the text flips to white. It is one pseudo-element scaled up from the icon's position, so nothing reflows.

card · fill · gradient

Ticket Card Hover

An event ticket with punched notches and a perforated stub that starts to tear away on hover. The notches are radial-gradient masks, and a drop-shadow on the wrapper follows the cut shape.

card · playful

Music Player Card Hover

A track row where the cover art dims, a play button springs up over it and the little equalizer comes alive. Each bar has its own duration, so the bounce never looks like a loop.

card · icon · overlay

Job Listing Card Hover

A job board row: an accent bar slides down the left edge, the company mark tips, and the salary steps aside for an Apply button. It also works from the keyboard through :focus-within.

card · button · reveal · tailwind

Animated Dashed Border Card Hover

A file drop zone whose dashed outline starts marching and turns accent on hover while the upload arrow bobs. The dashes live on an SVG rect with pathLength 100, so the loop has no seam.

card · border · icon

Wallet Card Hover

Three payment cards tucked into a wallet rise out and fan slightly on hover, back card first. Each card reads one --i property for its resting offset, its lift, its tilt and its delay.

card · playful

Team Card Avatar Stack Hover

A team card whose overlapping avatars spread apart and hop one after another, while the count chip fills. The spread uses the translate property, which leaves transform free for the hop.

card · playful · minimal

Vertical Flip Card Hover

A business card that flips top over bottom to show the contact details, overshooting a little as it lands. The two-face flip card trick, turned on the X axis instead of Y.

card · 3d · tailwind

Door Open Card Hover

A panelled door swings inward on its hinge to show a lit room and a message behind it. One element rotates on its left edge and dims as it turns; the frame and room stay flat.

card · 3d · reveal · playful

3D Book Hover Effect

A hardcover book with a real spine and page block. At rest it shows the cover and the page edges; on hover it turns the other way to show the spine. Four faces on a preserve-3d box.

card · 3d · shadow

Page Turn Hover Effect

An open book whose right-hand page turns over on hover and lands on the left, showing the picture printed on its back. The leaf has two faces and hinges on the spine.

card · 3d · reveal

Paper Fold Card Hover

A travel card folded into three zig-zag panels like a brochure. On hover the folds open flat. Each panel hangs from the one above it, so one rotation per panel drives the whole fold.

card · 3d · image · reveal

Envelope Open Hover Effect

An envelope whose flap swings open on hover, then the letter slides up out of the pocket. The flap drops behind the letter halfway through, and leaving plays the steps in reverse.

card · 3d · reveal · playful

Layered Depth Card Hover

The card tilts and its contents lift off the background at different depths: the ridge a little, the title more, the badge and button most. Each layer is its own translateZ inside a preserve-3d card.

card · 3d · shadow

3D Notification Stack Hover

Three notifications stacked in depth, the older ones sunk back and peeking out below. On hover they come forward and spread into a list. Stacking uses translateZ, so the depth is real perspective.

card · 3d · shadow

Isometric Card Hover

A card laid out in isometric view with visible thickness. On hover it floats up off the surface while its shadow slides away and softens. Real side faces, so the slab has depth at any size.

card · 3d · shadow

Venetian Blinds Hover Effect

A window with its blinds closed. On hover the slats tilt open one after another, top to bottom, and the sunrise behind them comes through. Each slat rotates on X around its own center.

card · 3d · reveal

Pop-Up Card Hover Effect

A folded greeting card lying on a table. On hover the cover swings up on its crease and a heart stands up out of the fold, like a pop-up book. Cover, base and heart share one tilted 3D plane.

card · 3d · playful · reveal

Stand Up Card Hover

The card rests tipped back as if lying on a desk, and stands up to face you on hover with a springy overshoot. It hinges on its bottom edge, and a shade on the card lifts as it rises.

card · 3d · tailwind

Push In Card Hover

The card sinks into a slot in the page on hover, and the slot's four inner walls come into view around it. The walls are real planes behind the card, so the depth holds up at any size.

card · 3d · shadow · minimal

Cover Flow Hover Effect

Three album covers in the classic cover flow pose, the side ones turned inward and set back. On hover they swing flat and spread into a row. Each cover is one element with its own 3D transform.

image · 3d · card

Hanging Sign Flip Hover

A shop sign hanging from a nail that spins round to its other side on hover and swings a few times before it settles. The spring is a linear() easing curve, with a cubic-bezier fallback.

card · 3d · playful

3D Drawer Open Hover Effect

A filing cabinet whose top drawer slides out toward you on hover, showing its floor, walls and the folders inside. The cabinet face hides everything behind it until the drawer comes forward.

card · 3d · reveal · playful

3D Carousel Ring Hover

Six picture cards stand in a ring seen slightly from above. Hover and the ring spreads out and spins; leave and it stops where it is, because hover only toggles animation-play-state.

image · 3d · card

Ticket Stub Fold Hover

A concert ticket whose stub folds over along the perforation on hover, landing face down on the ticket to show the QR code printed on its back. The stub hinges on its left edge.

card · 3d · reveal

Stacked Toasts Hover Expand

Three toasts wait in a tidy stack with only the newest readable, then spread into a list on hover. One --i per toast drives both the stacked offset and the spread position.

card · reveal · shadow

Swipe to Reveal Actions Hover

An inbox row that slides left on hover to uncover snooze and archive buttons, like a swipe on a phone. The actions sit behind the row and pop in a beat after it moves.

card · reveal · button

Direction Aware Hover Effect

The caption slides in from whichever edge the pointer entered through. Four invisible triangles do it without JavaScript: the one you cross grows over the card, so the direction holds until you leave.

card · image · overlay

Cursor Tilt Card Hover

A plan card that tips the corner under the pointer toward you, with a glare that follows. A 3x3 grid of invisible cells sets the tilt, so it tracks the pointer in nine steps without JavaScript.

card · 3d · shine · gradient

Video Thumbnail Hover Effect

A video card that starts a preview on hover: the play button fades, clouds drift across the frame and a progress bar fills along the bottom. The playback is faked with transforms, no video file.

image · card · overlay

How to use these card hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.