Fading out siblings on hover in CSS | Hover effect for all siblings in CSS
Hover effect for all siblings in CSS | Fading out siblings on hover in CSS | CSS hover sibling
Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.
Here’s a tiny trick for making your hover states stand out, and also a cool way to target the siblings of the thing you’re hovering over. The effect is a mixture of two effects:
- Scale the hovered item
- Fade out the siblings
Html
<div class="container"><a class="card" href="#"><h3>This is option 1</h3></a><a class="card" href="#"><h3>This is option 2</h3></a><a class="card" href="#"><h3>This is option 3</h3></a></div>
CSS
<style>.container {display: flex;margin: 16px 0;}.container:hover .card {opacity: 0.5;}.container:hover .card:hover {opacity: 1;}.card {max-width: 262px;background-color: #f3f3f3;border-radius: 4px;padding: 32px 24px;margin: 12px;text-decoration: none;}</style>
The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.
