Product Thumbnail and Product Title Adjustments

Hi:

I am rebuilding a site on SS 7.1 that is currently on SS 7.0. In the 7.0 site the product thumbnail:

1) Has a black outline
2) Has a drop shadow effect
3) The product title shows on hover (with the image slightly opaque)

You can see how it looks on 7.0 here:
https://frameyourfeline.com/aquatic-life

Here is what I have been able to do so far with the product title showing on hover on the 7.1 site here:
https://frame-your-feline.squarespace.com/
Password: FYF

I need help with code to achieve #1, #2, & #3 above. Here is the code I have used so far trying to solve #3 - but with no luck:

 

.products.collection-content-wrapper .grid-image-hover {
    opacity: .0 !important;
}

/* product title price on hover */
section.grid-meta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    width: 100%;
    transform: translate(-50%,-50%);
    opacity: 0;
    transition: all 0.3s;
pointer-events: none;
}
.grid-item:hover section {
    opacity: 1;
    transition: all 0.3s;
}

Help with the above is super appreciated! 🙂

Hi,

Where is product? I can't find it on your site

https://frame-your-feline.squarespace.com/go-shopping

Hi tuanphan:

Sorry about that! Here is the product:

https://frame-your-feline.squarespace.com/aquatic-life

Password: FYF

I have been able to successfully add a black outline and a drop shadow to the product image. 

However, I need it so when you scroll over the product thumbnail it reveals the product title and the product image gets faded (but not all the way to pure white).

Right now I am unable to do that it it's driving me nuts. You can see the effect I am going for on the current 7.0 site here:

https://frameyourfeline.com/aquatic-life

Scroll over the product thumbnails and you'll see the effect I am trying to do on 7.1.

Your help is appreciated!

-Brian- 

On 12/28/2022 at 9:48 AM, BriGuy said:

Hi tuanphan:

Sorry about that! Here is the product:

https://frame-your-feline.squarespace.com/aquatic-life

Password: FYF

I have been able to successfully add a black outline and a drop shadow to the product image. 

However, I need it so when you scroll over the product thumbnail it reveals the product title and the product image gets faded (but not all the way to pure white).

Right now I am unable to do that it it's driving me nuts. You can see the effect I am going for on the current 7.0 site here:

https://frameyourfeline.com/aquatic-life

Scroll over the product thumbnails and you'll see the effect I am trying to do on 7.1.

Your help is appreciated!

-Brian- 

You mean

Initial: Hide title 

Hover: show title, show overlay color

?

Yes, no title displayed initially... then on hover the image fades and the title is revealed. When the image fades I'd still like to see it slightly opaque.

Hi tuanphan:

Haven't heard back from you... hopefully you have a solution?