Image tilt on mouseover (Interactions 2.0) not supported on all browsers?

Design help Animations & Interactions
1

Hello! I have been trying to design a list of my projects on my portfolio site similar to this site (though not as fancy, :wink:): Nathan Riley — Portfolio '22

Specifically the tilt effect on the project image, behind the text and button. I’ve been using Interactions 2 to create this. It works well in Chrome, but in Safari the image tilt overlaps and obscures the text, and in Firefox it doesn’t work at all. I use a Mac so I haven’t tested in Windows but I expect Windows Firefox might handle it the same. Not sure about Windows Chrome.

Anyway, my question is: is there something I could do myself in Webflow to resolve the overlap issue on Safari? Making this work in Firefox would be a bonus, but honestly a static hover with no tilt is fine in Firefox as long as the user can click the link to my project. However, this could be a limitation of Interactions 2 or Webflow, and if so I can just come up with a different design.

Here is the read-only link to my test project: https://preview.webflow.com/preview/bg-box-test?preview=9843b71ca660df83c03443a98314df4b

And the published Webflow URL: http://bg-box-test.webflow.io/

Thank you so much for your time!

2

hei @bengriggs
I tried on Windows Chrome and it works!
But on firefox, the movement become very subtle[almost not visible], if your value is 5 degree, maybe in firefox become 2 degree.

I’ve tried to use IX2 before, open in firefox, and it works.
But I’m not really sure about your project why it doesn’t work so well.

3

Thank you for checking! From what I can tell from how I set up my CSS and interactions, it should work fine. I don’t mind Firefox being subtle, but with Safari causing overlapping of elements, that’s a dealbreaker for me. Since I think the average Mac user just uses Safari because it’s built in. I may have to come up with a different design :slightly_frowning_face:

4

For the firefox to work you need to set perspective to the direct parent of the item being transformed. It cannot cascade parent perspective unfortunately. So you need to set perspective for your “wrapper”.

No idea about Safari though, sorry.

5

Good to know, thanks!