Date : 18th December 2023

For all the latest browsers

INFORMATION

Now that :has() is supported in all the major browsers, there is an easy way to target previous siblings using just CSS.

The text demonstration shows how to target the previous / next siblings, parents and children by hovering any of the images in the above grid.

The hovered image will scale to 2x size and become colored. The 8 images surrounding the hovered image will also scale and become slightly colored.

Move the hover to any of these surrounding images to see that zoom to 2x size and the other surrounding image change size and color.

All this is achieved using just html and minimal css. No jQuery or javascript is necessary.

Please consider making a donation, every little helps.