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. 

Is there some code to add so that the title only appears AFTER the hover, not before? TIA

On 2/16/2023 at 8:24 PM, issyb_a said:

Is there some code to add so that the title only appears AFTER the hover, not before? TIA

What is site url? We can test code easier

I'm trying to use the code above and running into the same problem with the title always being visible. How would the code change so that the title only appears on hover? 

site: https://thisispidgintestsite.squarespace.com/

pw: Pidgin

On 3/23/2023 at 4:33 PM, Christe said:

I'm trying to use the code above and running into the same problem with the title always being visible. How would the code change so that the title only appears on hover? 

site: https://thisispidgintestsite.squarespace.com/

pw: Pidgin

Which section/page are you referring to?