Using a link with an overlay on gallery grid not working?

Site URL: https://mouse-trout-epjy.squarespace.com/members

Hi, 

I have a gallery grid with a coloured overlay - but my image links don't work while the overlay is active. Here is my code for the overlay: 

.gallery-grid-item:hover .gallery-grid-item-wrapper:after {
    background: rgba(102,200,240,0.6) !important;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

When I disable this code the links on the images work again.  

Can anyone help with this? It is fundamental that the images have links - I can add the link to the caption but I would rather have the image as a link. 

site password: spong123

I have tried this with a row of images (not gallery block) and I am still having the same problem. As soon as I add the overlay, the clickthrough link on the image stops working. Please can someone help 😞

You can see this guide to create hover effect on gallery grid.

Is there a guide for a row of images (not gallery block)?

12 hours ago, arielestulin said:

Is there a guide for a row of images (not gallery block)?

Can you share url? We can check easier

I found a solution that seems to work on all MAC browsers. Need to check the PC side.

.sqs-block-image-link:after {
content:'';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999; }