How to create Product Title overlay / hover effect for product images

Hi there, I'm looking to create this overlay / hover effect with price and product title for my products in a 7.1 version template:

https://indigo-demo.squarespace.com/

Is this possible?

Thanks in advance for your help

Yes. Possible. Can you share link to shop page on your site? We can check & give the code to create effect easier

I'm in the process of building my site (so still on a free trial). Not sure if this link will work:

https://lily-yellow-zwzc.squarespace.com/config/

Your site is private. Can you setup password & share url?

yes, here is the url https://lily-yellow-zwzc.squarespace.com/config/

And the password is 'bathtub'

16 hours ago, bathtubgems said:

yes, here is the url https://lily-yellow-zwzc.squarespace.com/config/

And the password is 'bathtub'

Add to Design > Custom CSS

section.grid-meta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    opacity: 0;
}
section.grid-meta-wrapper * {
    text-align: center !important;
}
figure.grid-image:after {
    content: "";
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    opacity: 0;
}
.grid-item:hover section.grid-meta-wrapper {
    opacity: 1;
}
.grid-item:hover figure:after {
    opacity: 1;
}

Wow, thank you so much!!! That worked perfectly.