I am struggling to get direction-aware hover and css transitions to work properly. Basically I am trying to have a grid of elements with a front and back face, and when on hover have a css transition to flip that element to show the back face.

Transition example (without direction-aware): [fiddle](https://jsfiddle.net/wfkra51j/)

As you can see, no matter which way your mouse enters an element it always flips up. I want it to flip whichever way the mouse enters in/out.

Example:

[![Mouse in from bottom](https://i.stack.imgur.com/Fm9Qf.gif)](https://i.stack.imgur.com/Fm9Qf.gif)
[![Mouse in from right](https://i.stack.imgur.com/MJIkn.gif)](https://i.stack.imgur.com/MJIkn.gif)

And here is my attempt with direction-aware: [fiddle](https://jsfiddle.net/32g9vfq8/)

I am using jQuery to add classes relevant to the mouse in/out direction.

```
.hover-in-top {}
.hover-in-right {}
.hover-in-bottom {}
.hover-in-left {}

.hover-out-top {}
.hover-out-right {}
.hover-out-bottom {}
.hover-out-left {}

```

As you can see from the direction-aware example it kind of works but there are major glitches which I can't get my head round. (I've been overthinking this and my brain has just imploded.)

Anyway I hope this makes sense. Thanks.