How to Map Mouse Position in CSS

The goal is to create an invisible grid on the screen, and use the :hover pseudo-class to map each ‘cell’ to a set of values that we will allocate to the custom properties. We will use the mouse position to set the value of these properties, and then use them set the .square element’s width and height accordingly.