Hover effects are a quick and easy way to add movement and dimension to your Squarespace 7.1 website. In this tutorial, we share three image hover effects that will bring your website to life.

Here’s what you need to know before getting started.

How to update Block ID’s:

Block ID’s target the specific blocks on your website.

Here is an example of a block ID: #block-2c64c469358a23b66a91

To identify block ID’s, there’s an easy to use Google Chrome extension that will magically show you Block ID’s for every section on your website with the click of a button.

Add the Chrome plugin to your toolbar, open your website, and click the grid icon on the top right corner to enable the extension. You will immediately see the red block ID’s for all of the blocks on your site.

Click on the red sticker and the block ID will automatically be copied to your clipboard.

How to replace block ID’s:

Now that you know how to identify a block, here’s how to replace a block ID:

Enable Squarespace ID finder extension and click on the red section ID sticker that correlates with the image block you want to implement a hover effect
Replace section ID in the code snippet of choice (example: #block-917c4cb26a07417f8e33)
Save and refresh your site.

Change image on hover

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

// CHANGE IMAGE ON HOVER

  div#block-467583ee7d16eea81073 a:hover img {
    opacity: 0;
}
  div#block-467583ee7d16eea81073 a img {
    transition: all ease-in-out 0.5s;
    opacity: 1;
  }

div#block-467583ee7d16eea81073 a {
    background-image: url();
    background-size: cover;
    display: block;
}

Step 1:

Replace the block ID’s in CSS (make sure to keep div#)

// CHANGE IMAGE ON HOVER

div#block-467583ee7d16eea81073 a:hover img {
opacity: 0;
}
div#block-467583ee7d16eea81073 a img {
transition: all ease-in-out 0.5s;
opacity: 1;
}
div#block-467583ee7d16eea81073 a {
background-image: url();
background-size: cover;
display: block;
}

Step 2:

1) Click on “Manage Custom Files” in Custom CSS

2) Click “add images or fonts” and upload your image of choice

3) On line background-image: url(); place cursor between parentheses so that the cursor is sandwiched between them

4) Go to “manage custom files” and select the uploaded image to add the custom file URL between the parantheses

3) Save and refresh page

Zoom image on hover

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

// BLOG IMAGE SCALE EXAMPLE

#block-cd11125d4485b7f57d5e{
img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
}

#block-cd11125d4485b7f57d5e:hover { img {
transform: scale(1.1);
cursor:pointer;
}
}

Replace Block ID’s

Replace the block ID’s in CSS:

// BLOG IMAGE SCALE EXAMPLE

#block-cd11125d4485b7f57d5e {
img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
}
#block-cd11125d4485b7f57d5e:hover { img {
transform: scale(1.1);
cursor:pointer;
}
}

Save and refresh page

Note: Use Section ID’s (blue) instead of Block ID’s (red) if you want to apply the effect to all images within a section.

Lower image opacity on hover

Squarespace Tutorial: Change image opacity on hover — EXAMPLE

GO TO: DESIGN > CUSTOM CSS > COPY & PASTE CODE BELOW

// CHANGE IMAGE OPACITY ON HOVER

#block-49b95f7072485b829e0a img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }

#block-49b95f7072485b829e0a:hover img {
        background: #000000 !important;
		opacity: 0.5;
        z-index: 0;
    }

Replace Block ID’s

Replace the block ID’s in CSS:

// CHANGE IMAGE OPACITY ON HOVER

#block-49b95f7072485b829e0a img {
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease; }
#block-49b95f7072485b829e0a:hover img {
background: #000000 !important;
opacity: 0.5;
z-index: 0;
}

2) Save and refresh page

NOTE: Use Section ID’s (blue) instead of Block ID’s (red) if you want to apply the effect to all images within a section.

USE DISCOUNT CODE STYLEDSQUARE10 TO SAVE 10% OFF YOUR SQUARESPACE SUBSCRIPTION

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!