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@www.ishaanrawat.com and I’ll try to help you as soon as I’ll receive.

Thanks.