Jump to content

Product Thumbnail and Product Title Adjustments

Recommended Posts

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! 🙂

 

Edited by BriGuy
Wasn't finished with my post,
Link to comment
  • Replies 5
  • Views 406
  • Created
  • Last Reply

Top Posters In This Topic

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- 

Link to comment
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

?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.