A hover state on one element is feedback. Hover states across a group are choreography—and that is where interfaces start feeling alive. The pattern everyone remembers: hover one card in a grid and the others dim slightly, stepping back like a chorus line making room for the soloist.

The spotlight, in CSS

/* Siblings step back when one is chosen */
.grid:hover .card:not(:hover) {
  opacity: .55;
  transform: scale(.985);
}
.card {
  transition: opacity .35s, transform .35s;
  transition-delay: 40ms;  /* forgives drive-by cursors */
}

The 40ms delay is the difference between choreography and chaos: a cursor crossing the grid on its way elsewhere no longer triggers a strobe of dimming cards. The interface reacts to intent, not motion.

“Hover is a question. A premium interface answers it — and its neighbours politely step aside.”

The rules of the dance

Layer responses by weight: border-color shifts are whispers, lifts with shadow are statements, sibling-dimming is a spotlight—escalate only for elements that deserve it. Return should be slightly slower than arrival (leaving abruptly reads as rejection). And every hover needs a :focus-visible twin—keyboard users are having the same conversation and deserve the same acknowledgement.

Finally, remember hover is a desktop dialect: touch devices never speak it. Choreography must be enhancement, never information—if something is only discoverable by hovering, it is undiscoverable for half your audience.