Issue: Custom CSS is working on one gallery block, but not on others.

Site URL: https://rubbertape.co/people/test2

Hi there,

I'm using some custom CSS code I got from a YouTube video in order to create a hover effect in gallery sections on my 7.1 site, the goal being to darken the images and show their captions on hover. I'm copying the code below, but it works by targeting gallery sections.

It's working great on this portfolio page: https://www.rubbertape.co/people/test1. You can see the images darken and display a caption when you hover.

But on other portfolio pages within the same portfolio, also using galleries set to simple grid layout, the code doesn't seem to have any effect at all. See this example: https://www.rubbertape.co/people/test2

I put the code in the Website Tools > Custom CSS input. This is totally confusing me. Can anyone help??

Quote

/* REBECCA GRACE DESIGNS */
/* Gallery GRID Captions on Hover */
.gallery-grid .gallery-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); // 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: 1rem !important; // caption font size
  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:hover .gallery-caption {
  opacity: 1;
}
.gallery-caption-grid-simple {
  transition-delay: 0ms;
  max-width: unset;
}

@Lesum 😂 Wow. So obvious. I can't believe I was pouring over the code. Thanks so much!!