Caption overlays working for one page, but not another.

Site URL: https://addisonpann.art

password: toast

Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay.

Here's the CSS I'm using:

/* ------- GALLERY CAPTIONS --------*/
.gallery-caption-grid-masonry p.gallery-caption-content {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 2vw !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  line-height: 1.2em;
  color: #E19D9D;
  margin: 1.5em !important;
}


/*---- CAPTION HOVER OVERLAYS ------*/
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}
.gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before {
    background-color: rgba(0,0,0,.5);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s;
}
.gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry {
    z-index: 999999;
    opacity: 1;
    height: auto;
}
.gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry {
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before {
    opacity: 1;
    transition: all .5s
}
.gallery-caption-grid-masonry .gallery-caption-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
  font-size: 2em;
  font-weight: 400;
  margin: 2vh 2vw;
}
.gallery-caption-grid-masonry p.gallery-caption-content {
  z-index: 1000;
}

I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn?

Thanks in advance!

11 hours ago, tuanphan said:

IN above code, you will see this code

/*---- CAPTION HOVER OVERLAYS ------*/
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: -1;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}

change z-index: -1; (line 4) to   z-index: 999999999999 !important;

/*---- CAPTION HOVER OVERLAYS ------*/
.gallery-caption-grid-masonry {
  opacity: 0;
  z-index: 999999999999 !important;
  transition: all .2s;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  text-align: center;
  color: #fff;
  height: 100%;
  max-width: 100vw;
  padding: 0;
}

You nailed it! Thank you so much for your help.