This is an old experiment I did where I had my face follow the mouse around the browser document. Originally I wrote it using jQuery, but I’ve updated it to vanilla js. Source available on Github. You can access it on its own here: Physiognomy - A JS experiment.
Step one is to create an image with the nine different head positions:
Next create a function to take the mouse position and image position which will then be fed to another function which calculates which image to show. imagew and imageh are the size of the final element, in other words should be a third of the height and width
Next create a function to calculate which the CSS background-position and return it. This looks complicated but should be self explanatory. Each if statement tests where the mouse is relative to the element and sets the background-position accordingly.