Hi!
There’s a page called ‘Denner’s Villa Project’. In this page, there’s a slideshow of images that move between the green and brown squares.
I’ve set an interaction on mouse over. Everything gets messed up when I touch the brown card now.
Can you help?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi, did you fix it? To me it works as intended I think.
I’d like to add: in order to have a 3D effect, you need to set the perspective on the parent of the element that gets the 3D transform. if not, there is no perspective, and the 3D effect is weird.
For example, if I exaggerate the rotation on your element, you can see what’s going wrong: no perspective, it turns flat:
If you select it parent element, and set the children perspective to 2000, you’ll see that the perspective is there now.
So set children perspective on .case-study-hero, the parent element of your brown square, and your interaction will seem more natural.
Hi Vincent,
Thanks a lot as always. You’re the web flow forum rockstar. That made things work better. Just one more problem with this. The animation and interactions are working now. But once I hover over Case Study Cutout 2 (The brown square), and then click on the right slider arrow, the slides float over Case Study Cutout 2 and then assumes the right portion as z-index = 2.
Reference;
All elements of slider = z-index 2
Case Study Cutout 2 = z-index 3
Is this a glitch or am I doing something wrong?
To me everything works well on chrome. but on Safari, it’s not just a z-index issue that I see.
