Sibling fade
Fades out the siblings of a hovered item.
- Use a
transition
to animate changes toopacity
. - Use the
:hover
and:not
pseudo-class selectors to change theopacity
of all elements except for the one the mouse is over to0.5
.
<div class="sibling-fade"> <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span> <span>Item 5</span> <span>Item 6</span> </div>
span { padding: 0 16px; transition: opacity 0.3s; } .sibling-fade:hover span:not(:hover) { opacity: 0.5; }