OneTaskBy Tim King · Updated
CSS Hover Card Generator
Lift, Grow, Glow and Zoom Hover Effects for Cards, With Reduced Motion
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Hover Card Builder works
This CSS hover card builder adds lift, zoom and glow effects to cards. A hover effect tells the visitor a card is clickable before they click it. Choose lift, grow, glow, border reveal, image zoom or an accent title, tune the timing, hover over the preview to feel it, and copy the HTML and CSS with keyboard focus and reduced motion already handled.
CSS hover card: signalling a link
A card that responds to the pointer is doing two jobs: it signals that the card is interactive, and it makes the interface feel responsive rather than inert. Both depend on the effect being quick, subtle and consistent, which is why the timing controls matter as much as the effect itself.
Six effects, and what each is for. Lift moves the card up a few pixels and deepens its shadow, the most common pattern because it mimics a physical object rising towards you. Grow scales the whole card slightly; it is more noticeable than lift and suits grids where cards are small. Glow paints a coloured shadow around the card and works best on dark pages where a drop shadow would be invisible. Border reveal switches the border to the accent colour, the quietest option and a good fit for content-heavy layouts. Image zoom scales only the media block inside a clipped container, which reads as depth without moving the text. Accent title recolours the heading, a text-first alternative for cards without an image.
Transform and opacity are the cheap properties. Every effect here animates transform,
box-shadow, border-color or color. Transform is composited on the GPU and costs almost
nothing; box-shadow is repainted each frame and is fine for a handful of cards but worth watching
in a grid of fifty. Nothing animates width, height, margin or top, because those trigger
layout on every frame and are where hover effects start to stutter.
Timing is the difference between crisp and sluggish. Around 200–300ms is the range where an
effect reads as instant but still visibly eases. Below 150ms the motion is barely perceived; above
400ms the card feels like it is lagging behind the pointer. The ease-out curve is usually the
right default for something appearing or rising, and the overshoot curve
cubic-bezier(0.34, 1.56, 0.64, 1) adds a small bounce that suits playful interfaces and very few
others.
Focus is not optional. Every hover rule in the output is paired with :focus-visible, and the
card carries tabindex="0" so keyboard users get the same feedback when they tab to it. If the
card contains a real link or button, move the tabindex off the card and change the selector to
.hover-card:focus-within.
Reduced motion. The snippet ends with a prefers-reduced-motion query that removes the
transitions. The effect still applies — the card still lifts or glows — but it snaps rather than
animates, which is what the setting asks for. Visitors with vestibular disorders are the reason
this exists; it costs three lines.
The preview toggle. Touch devices have no hover, and neither does a screenshot. The Hover state option pins the hover styles on so you can see the end state without a pointer over it. Switch back to Rest state before copying — the toggle affects only the preview, never the code.
FAQ
Why does the hover effect not work on my phone?
Touch screens have no hover state; the effect fires on tap and then sticks until the visitor taps
elsewhere. That is expected. If it looks wrong, wrap the hover rule in @media (hover: hover) so
it only applies to devices that genuinely have a pointer.
Should I animate box-shadow?
It is fine for a few cards but more expensive than transform because the browser repaints the
shadow every frame. For large grids the cheaper trick is a second shadow layer in a pseudo-element
whose opacity you animate instead, which keeps everything on the compositor.
Why is the image zoom clipped inside the card?
The card has overflow: hidden, so when the media block scales past its box the excess is cut
off. That is what produces the zoom-in look rather than the image growing outside the card. Remove
the overflow rule and the effect stops working as intended.
How do I make the whole card a link?
Either wrap the article in an <a> and move the hover styles to a:hover .hover-card, or keep
one link inside the card and use .hover-card:focus-within for the keyboard state. The second is
better for accessibility because the link text stays short and readable.
What does the reduced-motion query actually do?
It removes the transitions for anyone whose operating system has "reduce motion" enabled, so the card jumps to its hover state instantly instead of animating. The visual feedback is preserved; only the movement over time is dropped.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Cubic Bezier
Shape a CSS easing curve and watch it animate.
CSS Transform Generator
Compose translate, rotate, scale and skew into one transform value.
Blog Card Builder
Article preview cards with image, tag, excerpt and author.
Expandable Card
Collapsible card built on details/summary, no JavaScript.
Flip Card
3D flip card with front and back faces, no JavaScript.