overlay not working with url links in gallery images

Site URL: http://www.tinygiant.co.nz

I have captions and overlay appearing on my masonry grid images but once I add a url link to each image the overlay disappears. Any ideas how to rectify this? Thx

Hello!

Assuming you are using custom code to fix this, here is a new CSS and JS code snippet that will work on masonry gallery items with links in Squarespace 7.1. The JS is necessary to make the text have a link. After you remove the old code snippet, paste the following into Settings > Advanced > Code Injection > Header:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('[data-section-id="62037aec6ab90b64e0c4430b"]').find(".gallery-masonry-item").each(function() {
      var href = $(this).find(".gallery-masonry-image-link").attr("href");
      $(this).find(".gallery-caption .gallery-caption-content").wrap('<a href="' + href + '"></a>');
    });
  });
</script>

<style>
  /* Appear on Hover */
  @media(min-width: 768px) {
    [data-section-id="62037aec6ab90b64e0c4430b"] figure.gallery-masonry-item {
      position: relative;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] figcaption.gallery-caption {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 50%;
      text-align: center;
      color: #ffffff;
      z-index: 999999;
      opacity: 0;
      transition: opacity .3s;
      padding: 0 !important;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] figcaption.gallery-caption p {
      font-size: 20px !important;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] figure.gallery-masonry-item .gallery-masonry-item-wrapper > a:after {
      position: absolute;
      content: "";
      background: rgba(0, 0, 0) !important;
      opacity: 0;
      transition: opacity .3s;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper > a:after {
      opacity: 0.4;
      transition: opacity .3s;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] figure.gallery-masonry-item:hover figcaption.gallery-caption {
      opacity: 1;
      transition: opacity .3s;
    }
    [data-section-id="62037aec6ab90b64e0c4430b"] .sqs-block-content:hover figcaption {
      opacity: 1;
      transition: opacity .3s;
    }
  }
</style>

Hope this helps!