CSS Pseudo-classes Trick Using :has, :not, and :hover

Last updated July 12th, 2025 at 05:47 pm

Here’s a way to use the CSS pseudo-classes :has, :not, and :hover for fun effect.

Suppose you have a 3×3 grid of cards or images. When you hover over any one of the 9 elements, make that element stand out by affecting how all the other elements behave. In this example, the non-hovered elements (a) get smaller; (b) change background colors; and (c) get blurred. And all of these effects take place gradually, with CSS transitions.

I learned this from a Kevin Powell YouTube video. I can’t begin to quantify how much I’ve learned about CSS — and have been inspired to experiment with CSS — from and by Kevin.

Here’s the CodePen pen:

You can edit the pen to experiment.

See the Pen
has not hover simple by Jeffrey Cohan (@jdcohan)
on CodePen.