How to add a title and change opacity when hovering over an image in Gallery grid: masonry

Site URL: http://liaheinze.com

Hi there ––
Hoping someone can help me add a a title and change of opacity when hovering over image links in my gallery grid. 
Thanks 🙂

Add to Home > Design > Custom CSS

/* Grid hover - tuanphan */
figure.gallery-grid-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-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
/* END Grid hover - tuanphan */

@tuanphan

Thanks for the response! That didn't seem to do the trick.  This is the only code I have input, in order to make the masonry gallery stack in one column on mobile -- could it be affecting it in some way, and causing your code to not show any changes?

@media (max-width: 800px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 1;
        column-gap: 0;
        padding: 0px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding: 0px 0px 10px !important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
  .header-nav-item--active a {
   background-image: none;
}