bathtubgems Posted March 7, 2022 Share Posted March 7, 2022 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 Link to comment
tuanphan Posted March 10, 2022 Share Posted March 10, 2022 Yes. Possible. Can you share link to shop page on your site? We can check & give the code to create effect easier 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
bathtubgems Posted March 11, 2022 Author Share Posted March 11, 2022 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/ Link to comment
tuanphan Posted March 13, 2022 Share Posted March 13, 2022 Your site is private. Can you setup password & share url? 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
bathtubgems Posted March 14, 2022 Author Share Posted March 14, 2022 yes, here is the url https://lily-yellow-zwzc.squarespace.com/config/ And the password is 'bathtub' Link to comment
tuanphan Posted March 15, 2022 Share Posted March 15, 2022 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; } 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
bathtubgems Posted March 16, 2022 Author Share Posted March 16, 2022 Wow, thank you so much!!! That worked perfectly. Link to comment
issyb_a Posted February 16 Share Posted February 16 Is there some code to add so that the title only appears AFTER the hover, not before? TIA Link to comment
tuanphan Posted February 21 Share Posted February 21 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 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
Christe Posted March 23 Share Posted March 23 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 Link to comment
tuanphan Posted March 25 Share Posted March 25 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment