On a hovered item, we can fade away the sibling. Use the transition animation & animate the opacity. We can add more animation by scaling the hovered item.
We use the :not selector & :hover selector at a time to make the sibling element fade.
Now let’s Code:
HTML
<div class="parent">
<div class="child">Home</div>
<div class="child">About</div>
<div class="child">Services</div>
<div class="child">Terms</div>
</div>CSS
.parent {
box-shadow: 5px 5px 40px rgba(0, 0, 0, 0.2), -5px -5px 40px rgba(255, 255, 255, 0.6);
}
.child {
display: inline-block;
background: white;
padding: 12px;
cursor: pointer;
transition: 0.2s;
float: left;
}
.parent:hover .child:not(:hover) {
opacity: 0.5;
background: white;
}Here is the preview for Sibling Fade
Read our other blogs here
Use can find the Source Code in our Github.
Let us know your feedback, Follow us on Instagram. 💖
