Caption Fade in Overlay on Masonry Gallery

Site URL: https://www.yespeach.com.au/

Hi, I'm trying to recreate this 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

Currently I can sort of get it. However when my fade comes in it fades my text as well. Here is what I have...

figure.gallery-masonry-item {

    position: relative;

}

.gallery-caption {

    position: static;

}

/* title */

.gallery-caption-content {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;

    padding: 7%;

    transition: opacity ease 200ms !important;

    opacity: 0 !important;

pointer-events: none;

}

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

    opacity: 1 !important;

}

/* overlay */

.gallery-masonry-item-wrapper a:after {

    background: rgba(0,0,0,0.5); /* overlay color */

    content: "";

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    opacity: 0;

    transition: opacity ease 200ms !important;

}

.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {

    opacity: 9.75;

}

.gallery-masonry-item * {

    color: white;

}

/* remove gap */

figcaption {

    padding: 0 !important;

}

 

/*text color size in masonry gallery*/

.gallery-caption * {

color: #000000 !important;

font-size: 30px !important;

  text-align: center;

}

 

 

/*creates opaque rollover effect for regular image blocks*/

.gallery-masonry-item:hover {

background-color: #525a5c; opacity: 0.3; transition: all .5s ease-in-out;}

 

 

Which page are you referring to? I don't see gallery on homepage