I’m building a website for a client and part of the site has a card flip interaction. On the back side of the card there is a button that they can click to read more information. There seems to be something interfering with this button and I’ve looked everywhere but can’t identify it - I’ve tried most things I can think of - I need an expert opinion.
Check out the example page below, hover over a card, and then you will notice that not all of the button is clickable. The first card seems fine but the following ones don’t work correctly.
When I remove all interactions and just display the back card the entire button is clickable so it has something to do with the interaction affecting other elements.
Turns out it is the text on the front card that is interfering with the button on the back. I’ve moved the text higher to fix this for now but that’s a weird one.
The thing that’s getting in the way of the buttons is the text on the front of the card, due to both sides occupying the same space.
To remedy this, I gave the back of the card a +1 move transform on the z axis to bring it away from the front of the card.
I also noticed that the flip interaction is interrupted if you move the mouse away from the card during the animation. You could fix this by wrapping the entire card inside of another div and having the interaction trigger on the outermost div but only affect the cardwrapper2 div.