Sibling Fade with CSS

Sibling Fade with CSS

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. 💖

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

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

three × five =