Initial hover effect before click - Canceled out after first click.

[level42ca]

I have a simply hover effect on the cards before they are clicked:

.front:hover { transform-style: preserve-3d; transform: rotateY(10deg); transition: transform .5s; }

This works fine, except, once I click on the card for it to flip, then flip it back, the hover effect no longer works until the page is refreshed.

Any ideas what's happening?

[edit] Trying to create this effect with flip.js

https://codepen.io/RuudBurger/pen/bwjry