In this challenge we implement a CSS text shadow mouse move effect!
When you move your cursor around some text, the text shadow is dynamically changed.
We listen to a mouse event on ‘hero’ and then when that changes we will figure out where to place
the text shadow based on the offset. It looks really cool!
A wierd thing is when we listen to the mouse move on hero, if there are children elements inside the hero,
the event.target will give us the x and y co ordinates of the actual element being hovered over.
To fix this, we need to do some normalisation to modify the x and y values. If the element we are hovering is the h1, then we
modify the x and y values so it will be consistent across all of the elements.
In the final demo I decided to use an image instead of text and to dynamically change it’s box shadow values.