Question 1

What CSS properties work well for hover effects?

Accepted Answer

The most performant hover properties are transform (scale, translate, rotate), opacity, box-shadow, and color/background-color. These are handled by the GPU compositor. Avoid hovering width, height, top, left, or margin as they trigger layout recalculation, which is slower.

Question 2

How do I create a smooth hover underline animation?

Accepted Answer

Use a pseudo-element with transform: scaleX(): a::after { content: ''; display: block; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transition: transform .25s; } a:hover::after { transform: scaleX(1); }. Add transform-origin: left to have it expand from the left.

Question 3

How do I apply hover effects to sibling elements?

Accepted Answer

Use the adjacent sibling selector (+) or general sibling selector (~): .card:hover + .card { opacity: 0.7; } or .container:hover .card:not(:hover) { opacity: 0.7; }. The :has() pseudo-class also allows parent selection: .container:has(.card:hover) .other { color: red; }

CSS Hover Effects Generator

Click an effect to see the CSS

Related Tools