3D hover effect issue. Background blur goes behind stuff

Design help Animations & Interactions
1

Hi guys,
I am struggling with an animation on a client’s site I am working on.

https://creavent.webflow.io/

On the section WHAT WE DO? (and in our toolbox, and in the hero) I have these cards that I want to have 3d hover effect. I used move mouse over element trigger and applied rotation. Also added a custom code for the frosty look of the cards. To see the frost i have a heading behind the cards. But for some reason when I am at around 0% of Y the top of my card appears to go behind the heading. Therefore the frost is lost.
Can anybody help me with this?

Thanks a lot!

Here is my public share link:

https://preview.webflow.com/preview/creavent?utm_medium=preview_link&utm_source=designer&utm_content=creavent&preview=3f6e502c1adaa6111497747241fda75b&mode=preview

2

Hi, @elli_kk! Taking a look at the preview link as well as the published site right now. I’m not able to reproduce the issue as you describe it. Would you be able to use a tool like CloudApp or Loom to provide me with a short video about what you’re seeing?

Also, it can help us better diagnose if you can share your browser version: https://www.whatsmybrowser.org/

Thank you — hope we can find out what’s going on!

3

Hi McGuire,
Here is my browser version

Here is my video.

Now we saw that in Safari is not visible. I guess it’s not something we can control.

What are your thoughts?

Thanks for you help,

Elli