Fading out siblings on hover in CSS

Nice one by Trys Mudford:

Hover states traditionally run on the element being hovered on (makes sense, right?). But we can also listen for the hover event on the parent element.

That’s the crux of this ‘trick’, we fade out all children when the parent is hovered, and attach another hover handler the child, fading it back in.

And with some pointer-events manipulation, it’s prevented that all items fade out when hovering the gaps between the items.

.parent:hover > * {
  opacity: 0.5;
}

.parent:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;
}

.parent {
  pointer-events: none;
}

.parent > * {
  pointer-events: auto;
}

Fading out siblings on hover in CSS →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.