How to change a summary block thumbnail image on rollover?

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

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.

@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

Try this plugin.

@tuanphan 

Thank you very much for your advice and the link.

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/

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!

Solved. You can share code for other members if possible.

@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.

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

Sorry for delay!

Under the culture page, Our Creatives would be the summary block.

https://primrose-orca-7hw8.squarespace.com/

password:123456789!

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

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?

/* 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);
}
}

@tuanphan attached is what is happening on hover.

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)
}

@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; " ?

Also any ways/tips for styling the hover to be slightly smoother would be much appreciated.

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);
}
}

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?

For some reason with the new code the thumbnails for 7 & 13 are coming out blank.

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

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

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!

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