How can I do a shadow effects while hovering on consecutive buttons

Question

I’m trying to replicate the Gmail hover effect where an email gets a shadow and appears to be in front of other emails when you hover over it. In Figma, however, the hover shadow appears behind the above buttons, making it semi invisible. Is there a way to achieve this effect using Autolayot?
Here is my example:

Raphael_M · Answer

Hi, Vivian.Try removing the fill on your component (opacity: 0.5%) and put the fill on the background only. So, the idea is making all the component’s background-color somehow transparent and the background-color is on the wrapping-frame only.It’s just that it won’t work when you will have a change fill color effect on it (it will still cover the shadow effect).This problem would still happen, unless we can now modify the zIndex of the component when hovering.

Sign up

Login with SSO

Login to the community

Login with SSO