The Styled Square | Premium Squarespace Website Templates

View Original

3 image hover effect styles to elevate your Squarespace 7.1 Website (CSS)

PIN TO SAVE FOR LATER!

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.

PERSONA SQUARESPACE 7.1 TEMPLATE

How to replace block ID’s:

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

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

  2. Replace section ID in the code snippet of choice (example: #block-917c4cb26a07417f8e33)

  3. Save and refresh your site.

Change image on hover

EXAMPLE

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

See this content in the original post

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

EXAMPLE

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

See this content in the original post

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

EXAMPLE

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

See this content in the original post

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!

More tutorials

See this gallery in the original post