Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to change a summary block thumbnail image on rollover?


TMedia

Question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@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
  • 0

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 10/25/2020 at 2:35 PM, tuanphan said:

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

Screenshot 2021-06-02 at 13.55.14.png

Link to comment
  • 0

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!

 

Screenshot 2021-06-03 at 09.25.23.png

Screenshot 2021-06-03 at 09.25.31.png

Link to comment
  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0

/* 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
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

Screenshot 2021-07-12 at 10.40.15.png

Screenshot 2021-07-12 at 10.40.23.png

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

primrose-orca-7hw8.squarespace.com-01-mi

2. (Mobile – homepage) Make 2 texts/row

primrose-orca-7hw8.squarespace.com-02-mi

3. (Tablet – homepage) There is a  scroll bar at bottom of the page

primrose-orca-7hw8.squarespace.com-03-mi

4. (Tablet – homepage) Button don’t lie on the same row

primrose-orca-7hw8.squarespace.com-04-mi

5. (Mobile – homepage/culture) Make images/titles/texts in 2 column are equal.

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

primrose-orca-7hw8.squarespace.com-05-mi

 

6. (Tablet/Desktop – footer) Reduce space above copyright

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

primrose-orca-7hw8.squarespace.com-06-mi

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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