Seven hover effects for clickable cards: a blog card whose image zooms and title underlines, a gradient border that fades in, an arrow that slides into the corner, a description that expands, paper layers that spread behind the card, a background that shifts tone and an option card that dips when pressed.
A blog card where hover zooms the cover image and underlines the title, two cues that the whole card is clickable. The title is the link, stretched over the card, and the underline is a native text-decoration so it wraps across lines.
A plain dark card whose border fades into a gradient on hover. The gradient border is always there, on a masked pseudo-element at zero opacity; hover only changes opacity, which is far cheaper than swapping backgrounds.
View code
<a class="chv2" href="#api"><b>API access</b><span>Build on top of your store data.</span></a>
A small arrow slides in diagonally from the top right corner on hover, a modern cue for cards that link elsewhere. The arrow is aria-hidden decoration and the card's text is the link name.
View code
<a class="chv3" href="#case"><span class="ar" aria-hidden="true">↗</span><b>Case study</b><span>How Linea doubled repeat orders.</span></a>
The card shows a title and a teaser; hover or focus reveals a longer description by animating grid rows from 0fr to 1fr. The full text is always in the DOM, so screen readers get it whatever the visual state.
View code
<a class="chv4" href="#course"><b>CSS layout course</b><span class="tz">Six lessons, one weekend.</span><span class="more"><span>Grid, flexbox, container queries and subgrid, each with exercises and a final project.</span></span></a>
On hover, two paper-like layers spread out from behind the card, as if a stack of pages fanned slightly. They are pseudo-elements that sit behind the card through isolation and move with small rotations and offsets.
A feature card whose background gradient slides to reveal a brighter tone while its icon lifts and turns slightly. Both changes are on hover and focus, and the card's contrast passes in both states because the text is white on dark tones throughout.
View code
<a class="chv6" href="#automation"><span class="ic" aria-hidden="true">⚙</span><b>Automation</b><span>Rules that run while you sleep.</span></a>
A selectable option card that dips slightly when pressed and lifts back on release, giving tactile feedback on touch screens where hover does not exist. It is a label for a radio button, so selection works with the keyboard too.
View code
<fieldset class="chv7"><legend>Delivery</legend><label><input type="radio" name="chv7" checked><b>Standard</b><span>3-5 days · Free</span></label><label><input type="radio" name="chv7"><b>Express</b><span>Next day · $9</span></label></fieldset>
Make the card's title the link and stretch it with a pseudo-element, or make the whole card a single link if it has no other controls. Never nest links or buttons inside another link.
Show focus on the card
When the title link is focused, use :has(a:focus-visible) on the card to outline the whole card, so keyboard users see the same target that mouse users hover.
Prepare the effect, toggle opacity
Expensive styling such as a masked gradient border can sit on a pseudo-element at zero opacity and fade in on hover. Toggling opacity is cheaper than recalculating backgrounds.
Touch needs feedback too
Without hover, a pressed state matters. A slight scale on :active confirms the tap on phones.
Frequently asked questions
How is this page different from animated cards?
Animated cards covers entrances and reveals; this page is about the hover and press response of link cards.
Will the stretched link break text selection?
It covers the card, so text cannot be selected by dragging. That is usually fine for short card text.
Can I combine two effects?
Yes, for example zoom and arrow. Keep the total motion small.