Grid gallery image with overlay text and an opacity layer on hover

I have galleries on portfolio pages with captions changed to overlay text using the CSS below. The text is static (does not disappear or appear on hover), and I want an opacity effect to show on hover to indicate the image is a clickable link.

This works on the main portfolio page, but it does not work for the galleries on individual portfolio item pages.

The problem is, when I add the opacity layer, the gallery image on the portfolio item page is no longer clickable, the link is broken. 

Hoping for some input on this!

/* Grid gallery captions text overlay with opacity change on hover */
.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 3.2rem !important; // caption font size
  font-weight: 700 !important;
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
  text-align: center; // center text within caption box
}
.gallery-grid-item {
  position: relative;
}
.gallery-grid-item .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

/* Hover */
/* Grid gallery captions on Hover */
.gallery-grid .gallery-caption:hover  {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2); // overlay color 
  height: 100%;
  padding: 0;
  opacity: 0;
  pointer-events: auto;
}

.gallery-grid-item:hover .gallery-caption {
  opacity: 1;
}


/* Portfolio item page grid gallery image hover */

/* Keep portfolio item image overlay text on hover */
.portfolio-grid-overlay .grid-item .portfolio-text:hover {
  opacity: 1 !important;
}

/* opacity hover effect - not working*/
.portfolio-grid-overlay .grid-item :hover  {
 background: rgba(0,0,0,0.2); // overlay color 
}

Revised CSS below with different rules for the gallery grid on a portfolio page and on a regular page with a gallery grid.

Everything's working now with one outstanding issue: the background opacity on hover for gallery images on pages also darkens the text (screenshot 2), where I can keep the text white on hover for the portfolio page gallery images (screenshot 1) and haven't been able to solve this.

Any input is appreciated.

/* Grid Gallery Captions */

.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(0,0,0,0.1); // overlay color 
  padding: 0;
  opacity: 1;
  pointer-events: none; //controls if the image link works - auto breaks link 
}
.gallery-grid .gallery-caption-wrapper {
  display: flex;
  align-items: center; // center caption box vertically 
  justify-content: center; // center caption box horizontally
}
.gallery-grid .gallery-caption-content {
  font-size: 3.2rem !important; // caption font size
  font-weight: 700 !important;
  color: white; //caption font color 
  padding: 1vw; // padding around the caption
  text-align: center; // center text within caption box
}
.gallery-grid-item {
  position: relative;
}


/* Portfolio Main page grid item hover */

/* Keep portfolio item overlay text from disappearing on hover KEEP THIS */
.portfolio-grid-overlay .grid-item .portfolio-text:hover {
  opacity: 1 !important;
    background: rgba(0,0,0,0.2) !important; // overlay color 
} 

/* Hover */
 /* Grid Gallery Captions on Hover KEEP THIS */
.gallery-grid .gallery-caption:hover  {
  background: rgba(0,0,0,0.2) !important; // overlay color 
  opacity: 1;
   z-index: 1000;
  pointer-events: inherit;
}
 
/* Different CSS for gallery grid images on pages that are not portfolio pages */

figure.gallery-grid-item .gallery-grid-image-link:after {
    content: "";
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
    transition: all 0.2s ease;
}
figure.gallery-grid-item:hover .gallery-grid-image-link:after {
    opacity: 1;
    transition: all 0.2s ease;
}

 .gallery-caption-grid-simple {
  transition-delay: 1ms;
  transition: all 0.2s ease;
  max-width: unset;
} 

/* Trying to keep caption text above the opacity color on hover NOT WORKING */
.gallery-grid-item .gallery-caption:hover  {
  opacity: 1 !important;
}

try add !important to the z-index here:

50 minutes ago, BarbaraD said:

/* Hover */
 /* Grid Gallery Captions on Hover KEEP THIS */
.gallery-grid .gallery-caption:hover  {
  background: rgba(0,0,0,0.2) !important; // overlay color 
  opacity: 1;
   z-index: 1000;
  pointer-events: inherit;
}

The issue definitely has to do with the z-index and not the opacity itself.

If you can make the page public with a password i would be happy to look into it.

Thanks for the suggestion mudebbela, I tried !important there but no change.

Site is https://beaver-creek-industries.squarespace.com/
PW: beavercreek

This page works, with an opacity layer on hover with text remaining white: https://beaver-creek-industries.squarespace.com/featured-projects

But on individual portfolio pages with gallery grids, the text darkens on hover along with the opacity: https://beaver-creek-industries.squarespace.com/featured-projects/healthcare

That did the trick. It's working perfectly now. Thank you for being so helpful, it is much appreciated!