Hover is the cheapest feedback on the web: it tells the reader that something is clickable, before they click. Everything below is two properties and a transition.
How to add a hover effect in CSS: :hover, transition and transform
.card {
transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgb(0 0 0 / .12);
}The transition goes on the base element, not inside :hover — otherwise it animates on the way in and snaps on the way out.
Keyframe hover animations, fade on hover, delaying the effect and disabling hover on touch
@media (hover: hover) {
.card:hover { transform: translateY(-4px); }
}
.card:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}Two guards worth copying every time: @media (hover: hover) so a phone does not leave the effect stuck after a tap, and a :focus-visible state so keyboard users get the same signal.
If you are unsure whether you want a transition or a keyframe animation here, transitions and animations compared lays out when each one fits.
Image hover effects: text on image hover, zoom, overlay and changing the image on hover
A caption that appears over a photo is a container with the image and the caption inside: the caption sits absolutely positioned at opacity 0, and the container’s hover reveals it. A zoom is a scale on the image with overflow hidden on the container, so the frame stays put while the photo grows.
Button hover effects: fill, gradient, border, radio and secondary buttons
A fill that sweeps in reads better than a flat colour swap: put the fill on a pseudo-element, scale it from one edge, and keep the label above it. Whatever you do, change something other than colour alone, so it is visible to colour-blind readers too.
Text and link hover effects: animated underline, color sweep and icon hover
.link {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .3s ease;
}
.link:hover { background-size: 100% 1px; }An underline that grows from the left, with no extra markup. It is the one hover effect worth adding to body links, because it reinforces that they are links. It animates background-size, so it repaints rather than composites — fine for a one-line link, not for a whole grid.
Menu and navbar hover effects: links, headers and transitions
Menus want the quietest version of all this: a colour change, a small marker, an underline. The item must not move or resize, because a nav that reflows under the pointer is hard to aim at.
Card hover and micro animations: the effects worth copying
Lift the card a few pixels, tighten its shadow, maybe nudge an arrow. The test is whether you notice it when you are not looking for it: if you do, it is too much.
Hover effects in Bricks without writing CSS: float, zoom, ring and wobble from one class
Do it without code
Twenty motion presets, and the CSS for the rest
Hover animations gives you 20 presets from the panel: Float and Float with shadow, Zoom in and out, Wobble in four directions, and Rings in four colours and three sizes. The overlays, underlines and menu effects above stay CSS — they are styling, not motion, and Bricks already styles the hover state for you.
20 hover presets
Pitfalls: touch devices, focus states, accessibility and performance
The two guards from the first section are the whole list, and they are the two most often missing. Worth saying plainly about the presets: today they react to the pointer, so pairing them with a :focus-visible style of your own is on you — keyboard and touch behaviour for the presets themselves is on the public roadmap.
Go further: hover animations for Bricks, Etch and Gutenberg
Hover animations shows the twenty live; mouse animations go further — follow, move and 3D tilt — and the custom cursor changes the pointer itself.
How do I use the hover effect in CSS?
Add a :hover rule that changes a property (color, transform, opacity) and a transition on the element so the change animates. Every example in this guide follows that pattern.
How do I make a hover transition smooth?
Set transition on the base element, not only on :hover, keep it short, and animate transform and opacity rather than width, height or margins.
How do I show text over an image on hover in HTML and CSS?
Wrap the image and a caption in a container, position the caption absolutely with opacity 0 and reveal it on container:hover with a transition. That one is CSS, not a plugin preset.
What is a hover effect?
A visual change that happens when the pointer rests on an element: a color, a movement, a revealed caption. It gives feedback and hints that something is clickable.
How do I disable hover effects on mobile?
Wrap the hover rules in @media (hover: hover) so touch devices skip them, or give touch users the final state by default.
Can I add hover effects in Bricks without writing CSS?
Yes for the motion: Fancy Animations has 20 presets (float, zoom, wobble, rings) on one class, and Bricks styles the :hover state itself. Overlays and underlines you still write as CSS.