Fade out the hovered item's sibling.
Use a to animate the changes to . transitionopacity
Use the and pseudo-class selectors to change all elements except the element the mouse is over. :hover:notopacity0.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;
}
