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

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 post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Try this plugin.

4 answers to this 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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...