Custom CSS on Hovering Images Not Working

Site URL: https://www.averyyoungphotography.com

I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. 

Thanks!

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

1 hour ago, Avery-Stock said:

Site URL: https://www.averyyoungphotography.com

I am currently using the following code and it is working on some of my images but not on the new ones I just posted on my page. I just need help figuring out why this code is not working for those images and how to fix it. 

Thanks!

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,1); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    height: 10%; /* overlay height */
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
.gallery-masonry-item * {
    color: white;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Do you mean the following images?

Yes.  I would like the captions to look like the ones below.  

On 11/5/2021 at 6:49 PM, Avery-Stock said:

Yes.  I would like the captions to look like the ones below.  

That code for masonry, your gallery is grid

Try changing all "masonry" word in the code to "grid"

I changed the word 'masonry' to grid in the CSS below but it did not work. 

.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content { 
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

On 11/7/2021 at 10:28 AM, Avery-Stock said:

I changed the word 'masonry' to grid in the CSS below but it did not work. 

.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
    pointer-events: none;
    height: 10% !important;
}
.gallery-masonry-item:hover .gallery-caption-content { 
p.gallery-caption-content {
    font-family: LTC-Bodoni-160 
      !important;
}

 

Hi,

It looks like you are using some gallery sections on the page. Which gallery are you referring to?

https://www.averyyoungphotography.com/