A Pure CSS Gallery Focus Effect with :not

Oftentimes in the past, I needed to figure out how to add styles to all elements inside the container but not the hovered one.

This effect requires selecting the siblings of a hovered element. I used to apply JavaScript for this, adding or removing the class that defined the proper CSS rules on mouseenter and mouseleave events, similar to this:

A couple of months ago I was trying to implement the same approach to a grid-based feed on my company website and — boom — it didn’t work because of the gap between the elements!

Luckily for me, it appeared that it doesn’t have to stay like this, and once again I didn’t need JavaScript for it.

Let’s start coding by preparing the proper markup:

The markup looks like this:

The style should look like this:

This example code will create three list items occupying three columns in a grid.

Now, let’s add some interactivity. The approach that I initially applied was based on two steps:

Let’s start with grabbing every child while the cursor is hovering over the container:

Secondly, let’s exclude the currently hovered item and reduce the opacity of any other child:

And this would be perfectly enough for containers without gaps between the child elements:

However, in my case, I couldn’t remove these gaps:

When I was moving the mouse between the tiles all of the children elements were fading out.

We can assume that gaps are parts of the container that are not overlayed by its children. We don’t want to run the effect every time the cursor enters the container, but rather when it hovers over one of the elements inside. Can we ignore the cursor moving above the gaps then? 

Yes, we can, using pointer-events: none on the .grid container and bringing them back with pointer-events: auto on its children:

Let’s just add some cool transition on opacity and we have a ready component:

It’s probably even cooler when we add more tiles and create a 2-dimensional layout:

The final CSS looks like this:

With only 2 additional lines of code we overcame the gap problem!

Although it’s a compact solution, there are some situations where it might require some workarounds.

Unfortunately, this trick won’t work when you want the container to be scrollable, e.g., like in some kind of horizontal slider. The pointer-events: none style would ignore not only the hover event but all the others, too. In such situations, you can wrap the .grid in another container, like this:

I strongly encourage you to experiment and try to find a simpler and more native approach for tasks that are usually expected to have some level of complexity. Web technologies, like CSS, are getting more and more powerful and by using out-of-the-box native solutions you can achieve great results without the need of maintaining your code and cede it to browser vendors.

I hope that you liked this short tutorial and found it useful. Thanks!

source

If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.