Seven hover effects for everyday interface parts: a card that lifts, a tile whose shape morphs, a list row with a sliding background, a nav that dims everything except the hovered link, row actions that appear, a settings gear that turns and category tiles that invert their colours.
The basic interface hover: the element rises 4px and its shadow grows softer and wider, as if it moved toward you. Two shadows, a tight one and a blurred one, change together, which looks more natural than one large shadow.
View code
<a class="hv1" href="#docs"><b>Documentation</b><span>Guides, API reference and examples.</span></a>
An icon tile morphs from a squircle to a soft blob shape on hover by transitioning an eight-value border-radius. Each corner gets its own horizontal and vertical radius, which is how CSS makes organic shapes without SVG.
Hovering a list row slides a tinted background in from the left and nudges the text right, a clear hover for menus and file lists. The background is a gradient whose size goes from 0 to 100 percent, so there is no extra element.
When one item in a nav or list is hovered, the rest fade back, which points attention at the hovered one. :has(a:hover) on the list lets CSS style every link that is not hovered, with no script.
Edit and delete buttons appear at the end of a row when it is hovered, and also when anything inside it has focus through :focus-within, so keyboard users can reach them. On touch screens they are always visible.
View code
<ul class="hv5"><li><span>Homepage redesign</span><span class="acts"><button aria-label="Edit Homepage redesign">Edit</button><button aria-label="Delete Homepage redesign">Delete</button></span></li><li><span>Spring campaign</span><span class="acts"><button aria-label="Edit Spring campaign">Edit</button><button aria-label="Delete Spring campaign">Delete</button></span></li></ul>
A settings button whose gear icon turns a quarter on hover, a tiny confirmation that the pointer is on a control. The rotation is on the svg only, so the label stays still, and the turn is short enough not to distract.
Category tiles swap their background and text colours on hover, a bold and very readable effect for a grid. Both states pass contrast because they are the same two colours, just exchanged.
Touch screens have no hover, so nothing important may depend on it. Actions that appear on hover must be visible on touch devices (@media (hover: none)) and reachable with the keyboard.
Mirror hover on focus
Copy each :hover rule to :focus-visible, or to :focus-within for containers, so keyboard users get the same feedback.
:has() for group effects
Effects that change the neighbours, like dimming the other links, need the parent to know a child is hovered. .nav:has(a:hover) a:not(:hover) does it without script.
Fast in, fast out
Interface hovers should respond in 150 to 300ms. Longer transitions make a page feel sluggish when the pointer moves across many items.
Frequently asked questions
How is this different from the button and card hover pages?
Those focus on one component; these are general patterns for lists, navs, tiles and icons.
Do hover effects affect performance?
Transform, opacity and colour changes are cheap. Avoid hovers that change layout sizes on large lists.
Should I disable hover effects for reduced motion?
Remove the movement; colour and opacity changes can stay.