Guides · · Maxwell Prehoda
12 Card Hover Effect Examples That Make a Grid Feel Clickable
A good card hover effect answers one question: can I click this? The best ones do it with a lift, a light or a reveal that lands in under half a second, and they still work when the visitor is on a phone or a keyboard. Below are 12 card hover effects worth copying, from a Pokemon holo card with thousands of GitHub stars to the plain shadow lift that most product grids should use.
Ten are other people's work, credited and linked; two are ours. Every entry says what it is best for, what it runs on and what will bite you. Most carry a live demo from our directory, which is our own pure-CSS take on the pattern, not the original author's code.
1. Card Hover Interactions by Ryan Mulligan: Best for image cards that keep a CTA out of sight until hover
Platform: Pure CSS on CodePen
Sintra day trip
Palaces, mist and pastel walls, forty minutes from the city.
Ryan Mulligan's pen is the cleanest version of the most common card hover there is: a photo card where hovering slides up a description and a call to action over the background image. Speckyboy picked it first in its 2026 roundup of card hover snippets, and it is pure CSS, so there is no script to load or hydrate.
What makes it work is restraint. The image stays put, the text rises a short distance, and the reveal is quick enough that a visitor scanning a grid never waits for it. Our Content Rise Card below is a pure-CSS version of the same idea: the title sits low on the image and rises as the description fades in, all inside the image so the card never changes size.
Pick this for travel, recipe, portfolio and blog grids where the photo sells the click and the copy is a bonus.
Watch out for: Anything revealed only on hover is invisible on touch screens. Show the description by default inside @media (hover: none), and mirror the hover rule with :focus-within so keyboard users see it too.
2. Spotlight Card by Cruip: Best for learning the cursor spotlight effect step by step
Platform: Tailwind CSS + vanilla JS, Next.js or Vue
The dark card with a soft glow that follows your cursor is everywhere on developer tool landing pages, and Cruip's tutorial is the clearest explanation of how it is built. The card's outer div has 1px of padding to fake a border. A blurred light circle in the before pseudo-element lightens that border, and a blurred indigo circle in the after pseudo-element is the spotlight itself.
Both circles are positioned with two custom properties, --mouse-x and --mouse-y. A small Spotlight class listens for mouse movement on the container, converts the cursor position to coordinates relative to each card and writes those variables. Because the listener sits on the container, neighbouring cards light up at their edges as the cursor passes, which is the detail that makes the effect feel like one light source over the whole grid.
The tutorial ships in three flavours: plain HTML with vanilla JavaScript, Next.js and Vue, all with TypeScript where it applies. Pick it when you want to understand and own the code rather than install a component.
Watch out for: The spotlight only exists for a mouse. Touch and keyboard users get a plain dark card, so the border and text still need enough contrast without the glow.
3. Our Spotlight Card Hover: Best for a spotlight look with no JavaScript at all
Platform: Motions directory, free, pure CSS Ours
See every signal
Live dashboards that update the moment your data lands.
If you like the spotlight look but do not want a mouse listener, our Spotlight Card gets close with CSS alone. On hover a soft light glides in from the corner and settles near the top, lighting the border as it passes. Two registered @property percentages move one radial gradient, so the browser can transition the gradient's position like any other value.
It is honest about what it is: the light travels a fixed path rather than tracking the cursor. In a grid of feature cards that is often all you need, and it works the same on every card with zero script. The colour comes from one custom property, so it drops into a dark theme in a minute.
Watch out for: Registered @property transitions need a current browser; older ones jump straight to the end state. That is a fine fallback, but test it if you support old Safari versions.
4. Magic Card by Magic UI: Best for React and shadcn/ui projects that want a spotlight now
Platform: React + Motion + Tailwind, MIT, shadcn CLI
AI assistant
Drafts, summaries and replies in your own tone.
Magic UI's Magic Card is the spotlight card as an installable component: one shadcn command and you have a card where a gradient follows the pointer and lights the border. It has two modes. Gradient mode is the classic spotlight, with props for size, colour and opacity plus a from and to colour for the border. Orb mode swaps it for a blurred glow you can size, angle and soften.
Under the hood it tracks pointer enter, move and leave events and feeds them to Motion values, and its registry entry lists motion and next-themes as dependencies. That makes it a natural fit for a Next.js app already using Tailwind and shadcn/ui, and a heavy one for anything else. Magic UI is MIT licensed.
Our Glow Behind Card below is a pure-CSS cousin of orb mode: a blurred gradient blooms from behind a solid inner card and drifts while you hover. Vue teams can get the cursor version from Nuxt UI's PageCard, which has a spotlight prop and --spotlight-color and --spotlight-size variables.
Watch out for: Two runtime dependencies for a hover glow is a lot on a marketing page. If the card is static content, a CSS version costs nothing at load time.
5. Card Hover Effect by Aceternity UI: Best for service grids where one highlight glides between cards
Platform: React + Motion (layoutId), Tailwind, shadcn CLI
Aceternity's Card Hover Effect solves a different problem from the spotlight: instead of lighting each card, one background highlight slides to whichever card you hover. The demo grid links out to Stripe, Netflix, Google and others, and the highlight glides from tile to tile as you move across them.
The component's source shows how. Each card is a link with mouse enter and leave handlers that store the hovered index, and the highlight is a Motion span with a shared layoutId, so Motion animates it from its old position to the new card. It is a neat use of layout animation, and the whole grid reads as one control.
Use it for a small set of equal-weight choices: integrations, services, case studies. It is less suited to long product grids where the moving highlight becomes noise.
Watch out for: The highlight is driven by mouse events only, so keyboard focus does not move it. Add a visible focus style to the links, or set the index on focus as well.
6. Pokemon Cards CSS by Simon Goellner: Best for collectibles, badges and game cards that deserve a holo
Platform: CSS + Svelte, GPL-3.0
Simon Goellner's holographic Pokemon cards are the most famous card hover on the web, with around 8.3k stars on GitHub and write-ups from CSS-Tricks to Gigazine. Move the mouse over a card and the angle of the light changes, so foil patterns, glare and rainbow sheen shift exactly like a real holo card under a lamp.
The README describes the recipe as CSS transforms, gradients, blend modes and filters, applied with Svelte, recreating the different holofoil styles from the Sword and Shield era one by one. It is a masterclass in layering: each foil type is its own stack of gradients and blend modes.
This is the one tilt entry in this list. For more of that family, including vanilla-tilt and Apple TV style parallax, see our 3D hover effect examples. Our Cursor Tilt Card below is a much simpler pure-CSS cousin: a 3x3 grid of invisible cells tips the corner under the pointer toward you and moves a glare, with no JavaScript.
Watch out for: The repo is GPL-3.0, which has real obligations if you copy its code into a closed-source product. Study the technique, then write your own layers.
7. Stack Motion Hover Effects by Codrops: Best for portfolio and case study grids with a signature hover
Platform: anime.js + CSS 3D transforms
Manoela Ilic's Codrops experiment shows a stack of coloured cards behind the hovered thumbnail, tinted to match the image, then animates the stack in a quick fanning motion. The article credits the idea to a hover on the Merci-Michel studio site, and the demo offers several variations on how the stack moves.
The markup is simple: four decorative divs plus the figure inside a container with transform-style: preserve-3d, animated with anime.js. The point is personality. A plain lift says clickable; a stack says this studio cares about detail.
Our Stacked Cards Fan Out below is a pure-CSS take on the same idea, with the back cards swinging out on a springy curve driven by one custom property per card.
Watch out for: It is a 2017 experiment that loads a JavaScript animation library for a hover. Fine for a portfolio with nine tiles, too much for a catalogue with ninety.
8. Hover Card by Radix UI: Best for link previews like profile popovers on @mentions
Platform: React (Radix Primitives), open source
Some people searching for a hover card mean something else entirely: the preview card that pops up when you rest on a username or a link. Radix UI's Hover Card is the reference primitive for that. It opens after a 700 ms delay and closes 300 ms after you leave, so it does not flicker as the cursor crosses a page.
For motion it gives you data-state open and closed, data-side and data-align attributes, and a --radix-hover-card-content-transform-origin variable so the card can grow from the trigger rather than from its own centre. That last detail is what makes a popover feel attached.
Our User Profile Card Tooltip below is a pure-CSS version of the pattern: hover an avatar and a profile card slides out beside it, with its pieces staggered in.
Watch out for: Radix's own docs say the hover card is intended for sighted users only and its content is inaccessible to keyboard users. Never put anything there that is not also reachable on the linked page.
9. Cards on Uiverse: Best for browsing hundreds of community card hovers in one place
Platform: CSS or Tailwind, MIT, community gallery
Uiverse is an open-source gallery of UI elements made by its community, and the cards section alone lists more than a thousand designs in plain CSS or Tailwind. The site says everything it publishes is under the MIT License, and each element shows its author.
It is the fastest way to see a lot of ideas side by side. Filter by tags such as neumorphism, 3D or gradient, switch between plain CSS and Tailwind, and copy the code of anything that fits.
Treat it as a sketchbook rather than a component library. Quality varies from entry to entry, so read the CSS before you ship it.
Watch out for: Community snippets rarely include a prefers-reduced-motion guard or focus styles, and many hard-code sizes in pixels. Budget time to add both.
10. Designing Beautiful Shadows by Josh W. Comeau: Best for the plain lift that most product grids should use
Platform: CSS (box-shadow, filter: drop-shadow)
Weekend in Lisbon
Three days of tiles, tarts and trams.
The most useful card hover is the boring one: the card rises a few pixels and its shadow grows. Josh W. Comeau's article is the best guide to making that shadow look real. His rules: light every element from the same global source, stack several shadows with slightly different offsets and blur, and as an element gets closer to the user, increase the offset and blur and lower the opacity.
Apply that to hover and you get a lift that reads as physical rather than a grey smear. Tint the shadow with the background's hue instead of pure black and it looks better again.
Our Card Lift below is the minimal version: two properties transition, the card moves up 0.4em and its shadow deepens, and nothing inside the card moves.
Watch out for: Josh notes that layered shadows have a cost and that animating one is probably a bad idea. Put the bigger shadow on a pseudo-element and fade its opacity instead of transitioning box-shadow.
11. Cards by Heydon Pickering (Inclusive Components): Best for whole-card links that work with keyboards and screen readers
Platform: HTML + CSS pattern, no JavaScript
Casa do Mar
Before choosing an effect, decide what is clickable. Heydon Pickering's Cards chapter is the standard answer. Wrapping the whole card in a link makes screen readers announce the entire card as one long link name, and nested links inside it get missed. His fix: keep the link on the heading and stretch its after pseudo-element over the card with position absolute and all four offsets at zero.
For the hover itself he uses a box-shadow on the card, which respects rounded corners where outline used not to, and matches it with :focus-within so keyboard users get the same highlight. He also warns against putting :hover and :focus-within in one selector list, because a browser that does not understand :focus-within throws away the whole rule. That warning dates from when :focus-within was new; today :is() takes a forgiving selector list, so you can pair them in one rule safely.
Our Side Overlay Card below does exactly that with :is(:hover, :focus-within), so its panel slides in for the mouse and for the Tab key.
Watch out for: The stretched link covers the card's text, so visitors cannot select it. Raise any text people need to copy with position: relative, and accept the small gap in the click area.
12. Our Expanding Card Hover: Best for pricing, shipping and FAQ cards that hide one more line
Platform: Motions directory, free, pure CSS Ours
Our Expanding Card is a compact card that grows on hover to show an extra paragraph while its chevron turns. It animates grid-template-rows from 0fr to 1fr, so the browser measures the hidden content's height for you. No max-height guess, no clipped text when the copy gets longer, no JavaScript.
It suits cards where the headline does the selling and the detail answers a doubt: free shipping and its terms, a plan and its limits, a question and its answer. Like every snippet in our Card Hover Effects collection, it ships with a prefers-reduced-motion guard and two custom properties for colour and size.
Watch out for: A card that changes height pushes its neighbours. Give the grid align-items: start, or let it overlay the row below, so the layout does not jump while the cursor moves.
How to choose a card hover effect
Match it to the grid
The more cards on screen, the quieter the hover. A shop or search grid wants a lift like Josh Comeau's shadows or a photo swap; nine portfolio tiles can carry a stack or a holo. Feature grids on a dark landing page are where spotlights belong, either Cruip's cursor version or our CSS Spotlight Card.
Match it to your stack
If the card is static HTML, stay in CSS: everything in our Card Hover Effects collection is copy-paste with no script. Already on React, Tailwind and shadcn/ui? Magic UI and Aceternity install in one command but bring Motion with them. Check the licence too: Magic UI and Uiverse are MIT, Pokemon Cards CSS is GPL-3.0.
Match it to every input
Hover is a mouse-only luxury. Pair every :hover with :focus-within or :focus-visible, show hidden content by default under @media (hover: none), and wrap motion in prefers-reduced-motion. Keep the effect under about 300 ms on the way in, and never hide the only path to an action behind a hover.
Ship your card hover this afternoon
Start with the lift, add focus styles, and only reach for light, stacks or holo where the grid is small enough to deserve it. Copy any demo above from our Card Hover Effects collection, or browse the full Hover Effects directory for buttons, links and images. Our post on CSS animations for micro-interactions covers the timing side.
Want one that matches your own card markup? Paste your component into the creator, answer a few questions, and get production-ready CSS keyframes for it.
Make a hover effect for a product card in a grid of 12. On hover and on :focus-within, lift the card 4px and fade in a softer, larger shadow on a pseudo-element. Use 200ms ease-out in, 300ms ease-in out, transforms and opacity only. Under @media (hover: none), keep the card static and show the hidden price line by default. Under prefers-reduced-motion, swap the lift for a border colour change.
Common questions
How do I make a card hover effect in CSS?
Give the card a transition on transform and box-shadow (or on the opacity of a shadow pseudo-element), then change them in a :hover rule, for example translateY(-4px) and a deeper shadow. Repeat the same rule for :focus-within so keyboard users see it. Our Card Lift is that pattern in a few lines.
How do card hover effects work on mobile?
They mostly do not. Touch screens have no hover, and many emulate it on a tap, which can make a first tap reveal content instead of following the link. Use @media (hover: hover) to scope decorative effects to devices that can hover, and show any hidden content by default everywhere else.
How is the spotlight card effect made?
A radial gradient is positioned with two custom properties, usually set from the mouse position by a few lines of JavaScript, as in Cruip's tutorial. A CSS-only version can move the gradient along a fixed path by transitioning registered @property values, which is how our Spotlight Card works.
Should the whole card be a link?
Make the whole card clickable, but keep the actual link on the heading and stretch it over the card with a pseudo-element, as Inclusive Components recommends. Wrapping the entire card in an anchor makes screen readers read the whole card as one link name.
Which CSS properties should a card hover animate?
Transform and opacity, wherever you can. They can be composited without relayout. Animating box-shadow, width, height or top repaints or reflows every frame, which shows up as jank on long grids. Fade in a pre-drawn shadow instead of animating the shadow itself.
Sources
- Speckyboy: 8 CSS and JavaScript snippets for card UI hover effects
- Cruip: How to create a spotlight card hover effect with Tailwind CSS
- Magic UI: Magic Card docs
- Aceternity UI: Card Hover Effect
- simeydotme/pokemon-cards-css on GitHub
- Codrops: Stack Motion Hover Effects
- Radix UI: Hover Card
- Josh W. Comeau: Designing Beautiful Shadows in CSS
- Heydon Pickering: Inclusive Components, Cards
- MDN: hover media feature