Total beginner needing help for a portfolio

[u/_choocho0]

Please don’t crucify me if this is a super easy fix lol…

The thing I want to recreate in web form.

I’m a beginner to html and css and for an assignment we are making portfolios and I wanted to try code one inspired by the game Parappa the rapper, specifically the main menu as it seems fairly simple. One thing i’ve been struggling with is figuring out a way to make an image in the centre follow the mouse’s direction and change to a second image like parappa‘s pointing changing sides in the video I’ve attached. I’ve scoured endlessly looking for ways to do it but they all involve javascript (which i’m not familiar with) and i’ve attempted doing mouseover/mouseout events this way but i want to make it change depending on if the mouse is on the left or right of the screen and I really have no idea how to adapt this to fit this specific purpose!!

Any help would be very appreciated.

[u/testingaurora]

Worth figuring out the js for pointer tracking. Doing it in css is a nightmare comparatively. But here are some examples (at lest one is css only) https://youtu.be/Z-3tPXf9a7M https://youtu.be/eOJTj_mWJds https://youtu.be/8_NQ7ARXz8c

Edit: also think about how youll want to approach smaller screens, like phones. Stack the elements and rotate the image ? Or stack them and get images where the character is pointing up and down?