A hover proximity effect—where hovering one grid element also visually affects nearby ones—is achieved using modern CSS features including CSS Grid coordinate calculations, scroll-driven animations (view-timeline), and conditional CSS with functions like round(), mod(), hypot(), and if()/style(). The technique currently only works in Chromium-based browsers. Full code snippets are provided for the grid setup, coordinate tracking via scroll-driven animation timelines, and the conditional translate/scale logic that creates the proximity effect. A deeper explanatory article is promised for later.
Questions this post answers
How can I create a hover effect that also affects nearby grid items, not just the one being hovered?
Use a combination of CSS Grid coordinate calculations (via sibling-index() and sibling-count()), scroll-driven animations bound to view-timeline on hover, and conditional CSS with hypot() to compute distance between the hovered cell and each other cell, then apply translate and scale based on that distance. This works in Chromium-based browsers only. Track emerging CSS techniques like this proximity hover effect as browser support evolves, via daily.dev.