Changing transform-origin for hover effect (enter left, exit right)

Hi. One thing I've always struggled to understand is how to change
transform-origin
so that an animation smoothly enters from one side on hover and exits on the other when it loses the hover state. Here's what I have: https://jsfiddle.net/Matthais/epnky1o8/

Pretty sure Kevin did a video where he covered this a couple of years ago but would be a needle in a haystack to find.

Would be grateful if anybody can please point out where I'm going wrong
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Was this page helpful?