In the gallery module, go to Advanced tab and add cw-gallery-text-over-image to CSS Class
In the Custom CSS area of this module, add display:none; to Gallery Item Caption
In the Additional CSS area of the site, add
/*position the gallery items*/
.cw-gallery-text-over-image .et_pb_gallery_item {
position: relative;
}
/*remove the default top margin from the title*/
.cw-gallery-text-over-image .et_pb_gallery_title {
margin: 0 !important;
}
/*set the overlay z-index*/
.cw-gallery-text-over-image .et_overlay {
z-index: 1;
}
/*position and style the title and caption text container*/
.cw-gallery-text-over-image .cw-gallery-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(17, 17, 17, 0.8);
opacity: 0;
transition: all .5s ease-in-out;
}
/*show the title and caption on hover*/
.cw-gallery-text-over-image .et_pb_gallery_item:hover .cw-gallery-text {
opacity: 1;
}
/*added this to make the gallery images open in lightbox*/
.cw-gallery-text-over-image .et_overlay {
pointer-events: all !important;
}