I am really struggling to get anywhere with playing and reversing a timeline when hovering over the element. I have tried all manner of options but nothing seems to work. I know the animation plays on page load as you can see in my attached codepen (https://codepen.io/JonQuayle/pen/KLzZyp), but I just cannot get it to work on hover.
To give some insight into what I am trying to do:
I have the image (as a link) which has a semi-transparent overlay over the top and a div with a background cover (which is the same colour of the page background). On hover, I would like the div to move over from the left and cover a percentage of the image and remove the dark overlay from over the image = revealing the image underneath. The idea is to then have text sitting to the left of the image so then on hover, a portion of the image is revealed to the right of the text.
I hope that makes some sense. Any help with getting the animation to play on hover and back on mouse exit would be great.