How to make it so that an image with a large z-index does not interfere with clicking the button below it?

Question

css

The problem has an image that covers the edge of the button. The image is a figure of a woman with transparent zones. Using absolute positioning and z-index, I placed it in the right place (according to the designer's idea, it should somehow run into the button) and ran into a problem that now when I hover over the button, I hover over the transparent part of the image and accordingly the button is not pressed. How can I solve this problem with css? Or is this only possible with Photoshop?

Answer 1

pointer-events: none; apply to the picture. But this will affect the whole picture, not just the transparent parts. That is, all clicks will go through the image

Answer 2

Cut the woman into several parts with different widths so that the unoccupied area of ​​the image falls under the button.