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 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. 

@DomFish It can be done with custom code. Would it be possible to share your site URL? I can take a look. Thanks!

Hey Lesum,

this is my site URL: https://domfishdesigns.com/

Is this the URL you were looking for? 

@DomFish Just to confirm, you'd like to implement the hover effect on the gallery images of the website URL you provided, correct?

Hey Lesum,

Yes, I would like it so that when a user hovers over each image, the image darkens a bit, and its title pops up on my website URL: https://domfishdesigns.com/

In my first post, I provided a link to another graphic designer's website with what I am trying to do to mine if that is helpful.  

On 8/23/2023 at 3:54 AM, DomFish said:

Hey Lesum,

Yes, I would like it so that when a user hovers over each image, the image darkens a bit, and its title pops up on my website URL: https://domfishdesigns.com/

In my first post, I provided a link to another graphic designer's website with what I am trying to do to mine if that is helpful.  

You are use Gallery Section Masonry. Can you enable Gallery Caption then add some demo caption? Then add this code to Website > Website Tools > Custom CSS to add hover effect

figure.gallery-masonry-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-masonry-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-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-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Hey Taunphan,

Thank you for helping me with this! I will go ahead and implement the code into the CSS that you gave me and get back to you with any issues. Thanks a ton!

Hey Taunpha,

The code ended up working perfectly! Thank you! 

My next question is how to change the color of the title text along with its size. 

is this another thing I would have to include code for or will it be within squarespace somewhere? 

On 8/30/2023 at 5:03 AM, DomFish said:

Hey Taunpha,

The code ended up working perfectly! Thank you! 

My next question is how to change the color of the title text along with its size. 

is this another thing I would have to include code for or will it be within squarespace somewhere? 

To change size/color, adjust this code

/* 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;
}

to this

/* 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;
font-size: 10px !important;
color: #f1f !important;
}