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?


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

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

You mean images on this page?


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 faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

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