Gallery Caption with clickable Hover effect for 7.1

Hi Tuanphan, I am trying add a hover effect to a 'simple grid' gallery. On hover the image darkens slightly and a caption appears, which is great, but the way I have built this means you cannot now click on the link attached to the image.

Can you help me please. I have used the code from the two great threads you have been involved with solving as the base: "Gallery Caption worksarounds for 7.1 - Round 1 & Round 2" (

This is the code as it stands, (excuse my annotations):

body {
  width: 100%;
}
section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) {
  position: relative;
}
.gallery-masonry .gallery-item-description {
    visibility: hidden;
}
//TEXT
.gallery-item-description {
  font-family: urw-din-semi-condensed;
  font-size: 20px;
  color: white;
  text-align: center;
}
//OVERLAY?
.gallery-grid,
//.grid covers the simple gallery
.gallery-strips,
.gallery-masonry,
.gallery-reel,
.gallery-fullscreen-slideshow {
  .gallery-item-description {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 25% 0% 0% 0%;
    box-sizing: border-box;
  }
}

.gallery-grid-item 
.gallery-item-description {
    visibility: hidden;
      opacity: 0;
      transition-duration: 0.75s;
}
.gallery-grid-item:hover 
.gallery-item-description {
    visibility: visible;
      opacity: 100;
}
.gallery-grid-item.has-clickthrough:hover {
    opacity: 0.5;
}

.gallery-slideshow, 
.gallery-fullscreen-slideshow, 
.gallery-reel {
  .gallery-item-description {
    padding: 10px 25px;
    opacity: 1;
    transition: opacity 0.2s;
  }
  .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] {
    .gallery-item-description {
      opacity: 0;
    }
  }
}
.gallery-slideshow {
  .gallery-slideshow-list {
    position: static;
  }
  .gallery-slideshow-item-wrapper, .gallery-item-description {
    flex: 1 1 auto;
  }
}
.gallery-reel {
  .gallery-item-description {
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
  }
  &[data-width="inset"], &[data-width="inset"] {
    .gallery-item-description {
      max-width: 88vw;
    }
  }
  &[data-width="full-bleed"] {
    .gallery-item-description {
      max-width: 100vw;
    }
  }
}
.gallery-lightbox 
.gallery-item-description {
  margin-top: 1em;
  padding: 1em 2em;
  background-color: rgba(225, 225, 225, 1);
  transition: opacity 0.1s ease-out;
}
.gallery-lightbox-item[data-in=false] .gallery-item-description {
  opacity: 0;
}

Thanks so much for your help. Oh, this is the version of the footer code you wrote in the previous threads:

<script>
/**
 * Add descriptions/captions to galleries in Squarespace 7.1.
 * JavaScript 
 * © @brandon (Squarespace Forum User)
 * This software is provided "as is", without warranty of any kind, express or implied.
 */
document.addEventListener("DOMContentLoaded", function() {
  addGalleryItemDescriptions();
	
  function addGalleryItemDescriptions(gs, gdzs) {
    var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs));
  }
});
</script>

Can you share link to gallery page on your site?

Hi, the page which I have been trying to get things to work is:

https://reindeer-puma-hafr.squarespace.com/branding

Page passwork is: Tuanphan123 - the site is live, but this page is unlinked as I work on it in the background.

I see gallery clickable here. Did you solve for this gallery?

THAT RESONATE WITH YOUR AUDIENCE.

Hi, I had to turn it off so I could get the site working - I had to show it to someone and needed the site UX to work.

I will comment the code back in. Thanks so much for checking, I know how busy you are.

I went through all your rpevious posts regarding 7.1 gallery fixes, and I found the bit of code - it was there all along:

.gallery-item-description {
  pointer-events: none;
}

It has fixed the problem. Thank you so so much for all the wonderful work you do on here Tuanphan.

Hi there. I'm having this same issue where I've gotten captions to appear when hovering over images in the gallery, but now the images are not clickable. Spotlight now won't work at all (even though I have it turned on) and the images will not direct to a link. I have only used custom CSS as I do not want to upgrade to have to use javascript. Below is the code I'm currently using. Thank you for your help! Mainly just want to get spotlight working again in conjunction with this hover effect. 

16 hours ago, jimmydisplayname said:

Hi there. I'm having this same issue where I've gotten captions to appear when hovering over images in the gallery, but now the images are not clickable. Spotlight now won't work at all (even though I have it turned on) and the images will not direct to a link. I have only used custom CSS as I do not want to upgrade to have to use javascript. Below is the code I'm currently using. Thank you for your help! Mainly just want to get spotlight working again in conjunction with this hover effect. 

.gallery-caption {

position: absolute !important;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 102%;

text-align:center;

opacity: 0;

transition: all .3s ease;

background-color: white;

height: 100%;

}

 

.gallery-masonry-item:hover .gallery-caption {

opacity: .75;

transition: all .3s ease;

}

.gallery-caption-wrapper {

display: flex;

place-items: center;

justify-content: center;

}

 

.gallery-caption p{color:red!important}

.gallery-caption p{font-size:1.25rem!important}

 

Can you share link to page where you use gallery? We can check easier