Adding overlay hover caption in gallery block with lightbox enabled

Site URL: https://pear-sponge-56w4.squarespace.com/recarpet/event

Hello,

I would like to add an overlay caption when hovering over images in a gallery. 

 

I found the code to do this, it worked great but it disabled the lightbox function so the images couldn't be enlarged.

 

Would anyone be able to help take a look at the code to see how to keep the lightbox function working?

 

Thank you appreciate any help!

 

CODE:

.gallery-caption {

position: absolute;

top: 0;

left: 0;

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

height: 100%;

max-width: unset;

padding: 0;

opacity: 0;

}

.gallery-caption-wrapper {

display: flex;

align-items: center; /* center vertically */

justify-content: center; /* center horizontally */

}

.gallery-caption-content {

font-size: 1rem !important; /* caption font size */

color: white; /*caption font color */

}

.gallery-grid-item {

position: relative;

}

.gallery-grid-item:hover .gallery-caption {

opacity: 1;

}

.gallery-caption-grid-simple {

transition-delay: 0ms;

}

Try adding pointer-events: none to this code

.gallery-caption {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4); /* overlay color */
    height: 100%;
    max-width: unset;
    padding: 0;
    opacity: 0;
	pointer-events: none; /* enable clickable */
}