Loading...
Explore with  

Fade other(div) except the hovered one

Today I’d like to show you how to fade other html elements of the same parent except the one that is hovered with CSS only, basically with some CSS3 selectors. All you need to keep in mind is to have all the elements in the same parent.

Steps:

.child {
	opacity: 1;
}
.parent:hover .child:not(:hover) {
	opacity: 0.4;
}

What it will do is, as soon as the parent element is hovered. It will fade out all the child elements which are not hovered.
Now, just to have some smooth fade effect, I’ll add some transition to it.

.child {
	opacity: 1;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.parent:hover .child:not(:hover) {
	opacity: 0.2;
}

Demo

That’s it! Hope it went smoothly and even if it doesn’t, comment below and I’ll try to fix your issue.

If you need more help, mail me on support@ishaanrawat.com and I’ll try to help you as soon as I’ll receive.

Thanks.

About the Author

Ishaan Rawat is a Web Designer and Developer living in Jaipur. He loves to code and learn programming. He can be found solving public issues and problems on Experts-Exchange or Wordpress Forums. He is presently a Guru in Experts-Exchange having more than 150,000 points in HTML, CSS. You can find him on , , and .

No Comments
Add your comment