How to overlay an image on index thumbnails when hovering.

Site URL: https://www.thislandisdigital.com/test-rectangles

I've already located code to create a hover effect from a recent post (though it needs to be written for every single thumbnail). All of the tutorials and tips I've found so far replace one image with another, though, whereas I would like to overlay an image on top of the currently hovered thumbnail. The effect will basically place a border, some glowing vignette, and a few stylized notches as if looking through a camera.

The test index I'm using can be found here.

The image I'd like to overlay is here.

My current hover code looks like this (with some extra toys thrown in while I experiment!):

/* On hovering over a specific block, affect its image. */
a.project:nth-child(1):hover img,
a.project:nth-child(2):hover img,
a.project:nth-child(3):hover img,
a.project:nth-child(4):hover img
{
//visibility: hidden;
opacity: 50%;
//border-radius: 150px;
filter: blur(2px); //grayscale(100%); //invert(100%);
transition: all 0.5s;
}

a.project:nth-child(1):hover .content-fill,
a.project:nth-child(2):hover .content-fill,
a.project:nth-child(3):hover .content-fill,
a.project:nth-child(4):hover .content-fill
{
background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e83d5e07a31383b2b77d2d3/1585698273099/Thumbnails_HoverImage_02.png);
background-size: 100%; //or: cover;
background-position: center center;
background-repeat: no-repeat;
}

How do I make the image appear over top of the thumbnails? I don't really want to fade their opacity to reveal something behind them.

I see you solved this?

Not quite, and I'd still be interested in having a more robust solution. Right now the overlay is actually behind the thumbnails, having been loaded onto the background. In order to display both at once, I'm forced to fade the selected thumbnail to show the image hidden behind it. An unintended benefit of this approach was an ability to consistently display legible text over the darkened thumbnails.

What I had originally intended, however, was to place the overlay on top of the thumbnails, preserving the brightness and saturation of the thumbnail while giving me greater control over the results. The overlay is a PNG with transparency built in, so I hadn't intended to adjust opacity through the CSS at all (though fading the image in would look nice).

As far as my intended design choices go, I tend to solve these sorts of things by experimenting directly with whatever methods are available to me. I was still able to find a decent solution even without a proper overlay and, for all I know, it could still be the best looking solution even after I learn to make an overlay properly.

Learning CSS would be easier if I were starting with a blank site with structures of my own creation. Squarespace already has a hierarchy of containers and classes that, for me, are hard dissect and affect.

So again, I am still looking for a better way to apply an overlay image on thumbnails, specifically for an index page on the Avenue template. Thanks for any help that comes along.