BriGuy Posted December 18, 2022 Share Posted December 18, 2022 (edited) 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 December 18, 2022 by BriGuy Wasn't finished with my post, Link to comment
tuanphan Posted December 21, 2022 Share Posted December 21, 2022 Hi, Where is product? I can't find it on your site https://frame-your-feline.squarespace.com/go-shopping Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
BriGuy Posted December 28, 2022 Author Share Posted December 28, 2022 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
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
BriGuy Posted December 31, 2022 Author Share Posted December 31, 2022 (edited) 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. Edited December 31, 2022 by BriGuy Link to comment
BriGuy Posted January 6 Author Share Posted January 6 Hi tuanphan: Haven't heard back from you... hopefully you have a solution? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment