Why is the button (tag a) not doing its job as a button?

Question

css

I'm setting up a gallery, and the situation is that when hovering over the a tag, the cursor does not become "pointer" and nothing is clicked, but there is a link to the modal window. I roughly understand what the problem is, but I can not solve it.
My code: https://jsfiddle.net/eL7p0948/
(I circled the link with a red border)
(It clicks on the entire block with text, but can't get to the link)
Can it even make the whole block a link? Just the right way to do it...

Answer 1

It is blocked from above by another block, this will solve the problem

.gallery__text {
    z-index: 1;
}