TMedia Posted April 17, 2020 Share Posted April 17, 2020 Site URL: https://sturgeon-tangerine-zyeb.squarespace.com/ Hi, I already have my CSS set up to display the Summary Block item title and description on rollover, but I'm now looking to add to that functionality. Is there any way to have the actual thumbnail image change on hover? I want to be able to not only display text on rollover, but replace the image as well. Site password is scdp2020 Link to comment
tuanphan Posted April 18, 2020 Share Posted April 18, 2020 You mean images on this page? https://sturgeon-tangerine-zyeb.squarespace.com/ There are 2 ways to do this. Method 1 is to manually use the CSS for each image. Add this code to Home > Design > Custom CSS /* Hide image on hover */ .summary-item:nth-child(1):hover img { visibility: hidden; } /* set new image */ .summary-item:nth-child(1):hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat; } First item is nth-child(1) Second item is nth-child(2) Do similar The second way is to use JavaScript, which is set automatically, only once, and it will run for all images. This is time-consuming so it is outside the scope of free support, or you can wait for someone to answer for free. 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
SabineM Posted October 23, 2020 Share Posted October 23, 2020 @tuanphan Hi, Tuan, thanks a bunch for the code snippet! It is exactly what I am looking for - tried it right now - but it doesn't work in a shop summery... it makes the first image invisible but the second isn't showing up - there is only a white space the... This is the website and page where I would like to us it: https://www.weingut-diehl.com/weinindex/#tasting-box-wahl In the "shop summery/preview" Squarespace does it as a standard feature - it would be perfect to have the same in this first shop/product overview... https://weingut-diehl.squarespace.com/tasting-box do you have any idea? Thanks in advance! Sabine Link to comment
tuanphan Posted October 25, 2020 Share Posted October 25, 2020 Try this plugin. SabineM 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
SabineM Posted October 26, 2020 Share Posted October 26, 2020 @tuanphan Thank you very much for your advice and the link. Link to comment
Resonate Posted June 2, 2021 Share Posted June 2, 2021 On 10/25/2020 at 2:35 PM, tuanphan said: Try this plugin. @tuanphan - Apologies in hijacking this older thread, but I have a similar request - I've tried your code above and checked out the plugin link which seems to be for a product shop listing, but ideally I'd like to get this to work on a standard blog post. Using the above code I can get the image to change on rollover but it just shows a blank white panel instead of the linked image. I'm using some custom code on the summary block but even the code removed and everything as standard it still has the same effect. If you can suggest any other ideas to try I'd appreciate it! Many thanks https://www.thisresonates.uk/ Link to comment
Resonate Posted June 3, 2021 Share Posted June 3, 2021 ok so I've made some progress... one step forward two back... I've adjusted the code so the rollover image works on the tile instead of showing just a white panel, but it also shows behind the image title too. So there's now two issues to figure out, if anyone has any helpful ideas I'd appreciate it as I think I'm about out of things to try next! problem #1 - image shows behind text - as in screenshot problem #2 - the code works on multiple summary blocks so I'll need to figure out how to make it work for each summary block independently across the website. Hopefully there's a way to figure it out! Thanks! Link to comment
tuanphan Posted June 7, 2021 Share Posted June 7, 2021 Solved. You can share code for other members if possible. 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
TimBowman Posted July 2, 2021 Share Posted July 2, 2021 @tuanphan I am having some issues trying to implement the following code: /* Hide image on hover */ .summary-item:nth-child(1):hover img { visibility: hidden; } /* set new image */ .summary-item:nth-child(1):hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat; } I am wanting to add an alternative thumbnail image on hover for each item in a specific summary block in 7.1, I have set up a team members page using the blog format, so essentially am wanting to be able to have an alternative image for each team member when hovering over the thumbnail and to be able to specify each summary item rather than the first item in all summary blocks. Hope I have articulated this correctly, any help would be greatly appreciated. Link to comment
tuanphan Posted July 3, 2021 Share Posted July 3, 2021 15 hours ago, TimBowman said: @tuanphan I am having some issues trying to implement the following code: /* Hide image on hover */ .summary-item:nth-child(1):hover img { visibility: hidden; } /* set new image */ .summary-item:nth-child(1):hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat; } I am wanting to add an alternative thumbnail image on hover for each item in a specific summary block in 7.1, I have set up a team members page using the blog format, so essentially am wanting to be able to have an alternative image for each team member when hovering over the thumbnail and to be able to specify each summary item rather than the first item in all summary blocks. Hope I have articulated this correctly, any help would be greatly appreciated. Hi. Can you share link to team page? We can check 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
TimBowman Posted July 5, 2021 Share Posted July 5, 2021 Sorry for delay! Under the culture page, Our Creatives would be the summary block. https://primrose-orca-7hw8.squarespace.com/ password:123456789! Link to comment
tuanphan Posted July 7, 2021 Share Posted July 7, 2021 On 7/5/2021 at 4:23 PM, TimBowman said: Sorry for delay! Under the culture page, Our Creatives would be the summary block. https://primrose-orca-7hw8.squarespace.com/ password:123456789! Add to Design > Custom CSS /* Change summary image on hover */ div#page-section-60ddf15d825e274add1df103 { /* Hide image on hover */ .summary-item:hover img { visibility: hidden; } /* set new image */ .summary-item:hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat; } .summary-item:nth-child(1):hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); } .summary-item:nth-child(2):hover .intrinsic-inner div { background-image: url(https://cdn.pixabay.com/photo/2017/08/04/14/33/fish-2580208__340.jpg); } .summary-item:nth-child(3):hover .intrinsic-inner div { background-image: url(https://cdn.pixabay.com/photo/2021/06/10/17/57/bumblebee-6326653__340.jpg); } } Repeat for other members 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
TimBowman Posted July 7, 2021 Share Posted July 7, 2021 Thank you @tuanphan for getting back to me, much appreciated! I have just added the CSS and edited the URLS for the first 3 images, however on hover it is still white, would I need to change the first summary item URL in the above code? Link to comment
TimBowman Posted July 7, 2021 Share Posted July 7, 2021 /* set new image */ .summary-item:hover .intrinsic-inner div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat; } .summary-item:nth-child(1):hover .intrinsic-inner div { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/dbddd3c8-54ef-43b9-8085-a5e82e0894f2/2021-06-WBS-TEAMPORTRAITS-SHANE-20.jpg?format=500w); } .summary-item:nth-child(2):hover .intrinsic-inner div { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/cb8a7fdb-f9fa-477a-9ff5-c33be47b04b4/2021-06-WBS-TEAMPORTRAITS-BARBARA-73.jpg?format=500w); } .summary-item:nth-child(3):hover .intrinsic-inner div { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/0995be51-ce37-43ed-98ea-84c017da7e12/2021-06-WBS-TEAMPORTRAITS-EMERSON-18.jpg?format=500w); } } Link to comment
TimBowman Posted July 9, 2021 Share Posted July 9, 2021 @tuanphan attached is what is happening on hover. Link to comment
tuanphan Posted July 10, 2021 Share Posted July 10, 2021 ah, missing some class name. Remove above & use new code div#page-section-60ddf15d825e274add1df103 .summary-item:hover img { visibility: hidden } div#page-section-60ddf15d825e274add1df103 .summary-item:hover .summary-thumbnail div { background-image: url(https://beaverhero.com/wp-content/uploads/2020/04/squarespace-bio-page7-min.png); background-size: cover; background-repeat: no-repeat } div#page-section-60ddf15d825e274add1df103 .summary-item:nth-child(1):hover .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/dbddd3c8-54ef-43b9-8085-a5e82e0894f2/2021-06-WBS-TEAMPORTRAITS-SHANE-20.jpg?format=500https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60e59ea16c0d015ae55ad8d5/1625661103353/2021-06-WBS-TEAMPORTRAITS-SHANE-20.jpgw) } div#page-section-60ddf15d825e274add1df103 .summary-item:nth-child(2):hover .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/cb8a7fdb-f9fa-477a-9ff5-c33be47b04b4/2021-06-WBS-TEAMPORTRAITS-BARBARA-73.jpg?format=500w) } div#page-section-60ddf15d825e274add1df103 .summary-item:nth-child(3):hover .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/0995be51-ce37-43ed-98ea-84c017da7e12/2021-06-WBS-TEAMPORTRAITS-EMERSON-18.jpg) } TimBowman 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
TimBowman Posted July 12, 2021 Share Posted July 12, 2021 @tuanphanthank you so much! This has worked, only issue is now the image layout, is there any way to make sure the sizing is the same as the first thumbnail image? Would this be the bit of code that needs changing " background-size: cover; " ? Link to comment
TimBowman Posted July 12, 2021 Share Posted July 12, 2021 Also any ways/tips for styling the hover to be slightly smoother would be much appreciated. Link to comment
tuanphan Posted July 13, 2021 Share Posted July 13, 2021 22 hours ago, TimBowman said: Also any ways/tips for styling the hover to be slightly smoother would be much appreciated. Use new code div#page-section-60ddf15d825e274add1df103 { /* declare image hover effect */ /* don't remove these code */ .summary-item:hover img { visibility: hidden; transition: all 0.3s; } .summary-item .summary-thumbnail div { background-size: contain; background-repeat: no-repeat transition: all 0.3s; } /* end declared image hover effect */ /* declare hover images */ .summary-item:nth-child(1) .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/dbddd3c8-54ef-43b9-8085-a5e82e0894f2/2021-06-WBS-TEAMPORTRAITS-SHANE-20.jpg?format=500https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60e59ea16c0d015ae55ad8d5/1625661103353/2021-06-WBS-TEAMPORTRAITS-SHANE-20.jpgw); } .summary-item:nth-child(2) .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/cb8a7fdb-f9fa-477a-9ff5-c33be47b04b4/2021-06-WBS-TEAMPORTRAITS-BARBARA-73.jpg?format=500w); } .summary-item:nth-child(3) .summary-thumbnail { background-image: url(https://images.squarespace-cdn.com/content/v1/60ddf14b825e274add1def27/0995be51-ce37-43ed-98ea-84c017da7e12/2021-06-WBS-TEAMPORTRAITS-EMERSON-18.jpg); } .summary-item:nth-child(4) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec0f3eb10b9b33fab7f10e/1626083151433/2021-06-WBS-TEAMPORTRAITS-GIADA-21.jpg); } .summary-item:nth-child(5) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec0f07320dbd0de2a04b13/1626083099646/2021-06-WBS-TEAMPORTRAITS-ZAHRIN-31.jpg); } .summary-item:nth-child(6) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec11573b7e7c6334702fe2/1626083687772/2021-06-WBS-TEAMPORTRAITS-ELLA-37.jpg); } .summary-item:nth-child(7).summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec133219a9f87deb9367bd/1626084158226/2021-06-WBS-TEAMPORTRAITS-KARINA-44.jpg); } .summary-item:nth-child(8) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec13710a287971afb9d095/1626084230490/2021-06-WBS-TEAMPORTRAITS-SHANE-01.jpg); } .summary-item:nth-child(8) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec13710a287971afb9d095/1626084230490/2021-06-WBS-TEAMPORTRAITS-SHANE-01.jpg); } .summary-item:nth-child(9) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec1479d0dddb43d7558824/1626084494571/2021-06-WBS-TEAMPORTRAITS-EMERSON-30.jpg); } .summary-item:nth-child(10) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec14b1b9b95949b67eaaca/1626084549116/2021-06-WBS-TEAMPORTRAITS-ALEX-24.jpg); } .summary-item:nth-child(11) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec1507f4fe78435a5a683d/1626084632638/2021-06-WBS-TEAMPORTRAITS-KATIE-16.jpg); } .summary-item:nth-child(12) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec15402c5c2f6215e8f892/1626084687558/2021-06-WBS-TEAMPORTRAITS-JESSICA-30.jpg); } .summary-item:nth-child(13).summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec173cd0dddb43d755ac79/1626085205186/2021-06-WBS-TEAMPORTRAITS-TIM+B-07.jpg); } .summary-item:nth-child(14) .summary-thumbnail { background-image: url(https://static1.squarespace.com/static/60ddf14b825e274add1def27/t/60ec2e3ac22c005c9359fb96/1626091079810/2021-06-WBS-TEAMPORTRAITS-INES-14.jpg); } } 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
TimBowman Posted July 13, 2021 Share Posted July 13, 2021 Thank you @tuanphan, you have been a great help! The secondary images seem to take some time to load on the page initially, would reducing the image sizes help combat this? Link to comment
TimBowman Posted July 13, 2021 Share Posted July 13, 2021 For some reason with the new code the thumbnails for 7 & 13 are coming out blank. Link to comment
tuanphan Posted July 14, 2021 Share Posted July 14, 2021 Code 7 & 13 is missing .summary-item:nth-child(7).summary-thumbnail need a space between (7) and . It should be .summary-item:nth-child(7) .summary-thumbnail and .summary-item:nth-child(13) .summary-thumbnail TimBowman 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
tuanphan Posted July 16, 2021 Share Posted July 16, 2021 Do you want to fix these? Site URL: https://primrose-orca-7hw8.squarespace.com/ 1. (Desktop – homepage/community) Image and button on the right side are cut off https://primrose-orca-7hw8.squarespace.com/community 2. (Mobile – homepage) Make 2 texts/row 3. (Tablet – homepage) There is a scroll bar at bottom of the page 4. (Tablet – homepage) Button don’t lie on the same row 5. (Mobile – homepage/culture) Make images/titles/texts in 2 column are equal. https://primrose-orca-7hw8.squarespace.com/culture 6. (Tablet/Desktop – footer) Reduce space above copyright https://primrose-orca-7hw8.squarespace.com/community 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
TimBowman Posted July 16, 2021 Share Posted July 16, 2021 Hi @tuanphan that would be extremely helpful if you could help with the points listed above, especially the services listed in two rows! I also noticed that on Firefox the custom font I uploaded Futura PT is not showing and is replaced with the fonts in your screenshots above, I tried to rectify this with some css however when I sued the !important command other elements stopped working such as removing underlines & hover. I have copied over the site onto a new draft site as the trial period expired, new URL & password below. I have also had some issues trying to invert the logo o the mobile navigation bar as would like it to stay black throughout. https://marlin-gecko-mcny.squarespace.com/ password: 123456789! Link to comment
tuanphan Posted July 17, 2021 Share Posted July 17, 2021 On 7/16/2021 at 8:25 PM, TimBowman said: Hi @tuanphan that would be extremely helpful if you could help with the points listed above, especially the services listed in two rows! I also noticed that on Firefox the custom font I uploaded Futura PT is not showing and is replaced with the fonts in your screenshots above, I tried to rectify this with some css however when I sued the !important command other elements stopped working such as removing underlines & hover. I have copied over the site onto a new draft site as the trial period expired, new URL & password below. I have also had some issues trying to invert the logo o the mobile navigation bar as would like it to stay black throughout. https://marlin-gecko-mcny.squarespace.com/ password: 123456789! Hi. You can contact Squarespace Customer Care to extend trial (free). You can do this many times. You want to continue on new trial site or current site? We will check the code 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