Overlay image on hover in gallery Lightbox

Hello!

I am trying to create an overlay with an image inside of a gallery Lightbox, so that when the user hovers over the image, this overlay appears. I managed to do it in this gallery: https://www.fernandacortina.com/limited-editions for the grid itself, but on another page I want this same effect inside of the Lightbox only. I already have another hover effect for the grid in place.

The page I need help with is: https://www.fernandacortina.com/gallery

I've tried a couple of snippets of CSS but none of them have worked except to place an image on top of the Lightbox, but can't figure out how to get the hover effect and how to get that image overlay to repeat so it covers the whole image. 

You can use this code to Website > Website Tools > Custom CSS

/* Lightbox hover */
.gallery-lightbox-item-wrapper:after {
    opacity: 0;
}
figure:hover .gallery-lightbox-item-wrapper:after {
    opacity: 1;
}
figure.gallery-lightbox-item {
    pointer-events: initial !important;
}