Add a transparent text block over individual gallery images

On my main homepage, I have an image gallery showcasing all of my work. What I want to be able to do is when the mouse cursor hovers over one of the images in the gallery, I want it to darken the image and display the title of the work, similar to this website's page https://www.stevewolf.co/ . Let me know if this is possible and what code I must implement to make this happen. I attached an example image below of what an image looks like when the cursor hovers over the gallery image on the example site, I included in this chat. Thank you. 

My website domain is: https://domfishdesigns.com/

I just figured out that it is possible to use Squarespace's "Portfolio" to do what I am trying to figure out. However, is there another way to do this, or is it just worth using the "Portfolio" page that Squarespace provides, which already has this implemented, instead of trying to do custom code?

There are dozens of ways to get what you want

• Use Image Block - Inline or Poster Layout in Classic Editor + some CSS code (we can provide this)
• Use Gallery Section - Grid then use (#1) code in below (You need to enable gallery caption, add some caption, add link to image first)
• Use Summary Block
• Use Section + Text Block
• ....

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;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}