How to make text/overlay over Image Gallery Grid

#1. First, you need to enable Gallery Caption

#2. Next, add some text to Gallery Images

#3. Use this code to Custom CSS

 figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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;
    pointer-events: none;
    color: #fff;
    text-align: center;
}
/* overlay */
.gallery-grid-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;
    transition: opacity ease 200ms !important;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

#4. Result

1 Like