When mouse moves over element, element that sits on top of it disappears after a particular angle

Design help Animations & Interactions
#1

Hello :slight_smile:

When I move my mouse over an element that has a 3D animation specified to, an element that sits on top of it (to loop icon) disappears after a particular angle. Please see the screenshots below and you will know what I mean by that. How do I prevent this from happening? I already tried adjusting the z-index for both elements but that don’t seem to have any effect whatsoever.

I have had this problem multiple times and never took the time to solve this, but now I really want to.

You can find the element where the 3D interaction is set to in the last screenshot.

image
image2732×2048 355 KB

image
image2732×2048 352 KB

image
image1920×1439 158 KB

Here is my public share link: LINK

#2

I figured it out so no more help is needed. I think that because the loop icon was inside the parent div that had the Children perspective 1000px set on, this caused interference. I now moved the loop in a div Above the the div that had Children perspective set on, and now it isn’t acting weird anymore.