LinkBox: overlay not working when a child has an opacity < 1

[Layvier]

Description

When I use LinkBox/Overlay, I expect that setting the opacity of a child text element will not change the overlay behaviour, but instead the transparent text is not "clickable" through the overlay anymore.

Link to Reproduction

https://codesandbox.io/s/laughing-sun-q1qjmw?file=/src/index.tsx

Steps to reproduce

1. Go to 'the sandbox'
2. Hover on text below the title of the card
3. See that it is not clickable, even though it's wrapped within LinkBox

Chakra UI Version

1.7.3

Browser

Brave Browser + Firefox

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[m4x3d]

Thanks for reporting that!

Figured out that this is a problem with the Stacking Context. In the source of the LinkOverlay you can see that there is a zIndex set to 0 in the ::before. This is conflicting with the opacity of the Text. Here is a small example with that zIndex overridden: https://codesandbox.io/s/elegant-varahamihira-9zuwk6?file=/src/index.tsx

Will create a PR in few minutes for this.

[Layvier]

Amazing, thanks for the fast reply:)