Hi, I’m trying to make a card flip interaction so that when a user hovers over the circle, the front (with the picture) flips to show the back (with the bio). The circle currently flips but doesn’t show the back.
I’ve read other help pages, so things I’ve tried so far include:
Making sure the parent has a perspective set
Using a different trigger div that houses the circle that’s supposed to flip
Using transform to move text +1px on the Z-axis to separate it from the front and back
Setting the Z-index of the front 1px higher than that of the back
I think I can help you with this . You may need to go a bit further to get it working as you want, but try the following as a starting point:
Styling for ‘Front Profile Div’ (the Front)
Go to Transforms in the Styles Pane and click the Settings Cog
In the Settings set the Backface to hidden
Styling for ‘Back Description Div’ (The Back)
Go to Transforms again in the styles pane for this class, add a new Transform of Rotate Y -180
When I preview your ‘Card flip’ interaction with this new styling it appears to work, but in preview mode everything is hidden so a bit tricky to know for sure
I tried changing the styling as you recommended, but it still doesn’t seem to flip properly. It shows up ok when I preview the “Card Flip” interaction, but not when I preview the whole site. Sorry everything appears hidden. Just click once anywhere and the two circles will show up. This is what I’m currently getting, where the Back Description Div is always showing whether I hover over it or not:
I’m struggling to help without building this from scratch as there’s quite a bit going on in your designer. I think it might be worth creating a new page and loading in the elements for card flip separately. You may also find that there’s something going on in the interactions causing the flip to not work correctly, so by creating it again you may overcome the issue.
Let me know when how you get on, happy to look into it more.
Thanks, that project really is getting too complicated, haha. Here’s a new project with just the card flip on click. I still can’t quite get it to work when I preview the entire site. Could you take a look please?
Thanks for getting that on a new project for me, big help
I’ve got it working, the problem was with the interactions. Basically you don’t need the initial state on ‘Card Flip’ and ‘Card Unflip’. If you delete the first interaction on each of these and preview you should see it working.
You can easily switch your interaction from click to hover, using the same settings as you have for click just with the hover trigger. You may find there’s a judder when using the hover interaction though. To overcome this place your ‘Circle Div’ in a new Div and then set the hover interaction to trigger when the mouse is over the new div.
I’ve just been playing with this in your preview as know the original goal was to have it working on hover. This is what the structure looks like, you don’t need any styling on the div, but may want to class it just for reference.
. You may need to go a bit further to get it working as you want, but try the following as a starting point:
