Raycasting through part of a UI image and hitting another

I’m trying to add something to my game, and in this I have a bunch of images (filled image type images) that I am trying to add events to. The problem is that the Raycasts will hit the thing in front, even though that part of the image isn’t visible. In the attached image I gave a visual example of what I’m saying. The button is unpressable because the image’s collider is larger than just the visible part. If anyone could please explain how you change the actual collider of the image that would be great.

7979397--1024302--Example.png

Try setting its "Picking Mode" to ignore, rather than “position”. This will allow the raycast to skip that element and only hit the button beneath it.

If you still want a click event on the green image that is half covering the child layer - that I’m not sure of.

Thanks for trying to help, but unfortunately (I never really specified), I’m trying to make both elements clickable, so that won’t work.