Image Zoom Hover Effect

Images

21 Nov

How to Add a Zoom Image Hover Effect in Squarespace 7.1

Add a sleek zoom-in or zoom-out effect to your Squarespace images, giving your site a more interactive feel. This plugin allows you to add a zoom hover effect to images on your Squarespace site. You can choose between starting at the default size and zooming in on hover, or zooming out from a larger size to the original. The effect can be applied site-wide, to specific images using block IDs, or to all images on a specific page.

Difficulty Level:

Beginner: 5/10 - Some basic knowledge of Squarespace is helpful, but we’ll guide you through it.
Intermediate: 3/10 - If you know where to find Custom CSS, you’re good to go.
Expert: 1/10 - Just a quick copy and paste.

Features:

Zoom In on Hover: Make images grow slightly as users hover over them.
Zoom Out on Hover: Start with a larger image and return to the original size when users hover.
Target Flexibility: Apply the effect to all images site-wide, specific blocks, or specific pages.

How to Install the Plugin

The plugin can be easily installed using Custom CSS in your Squarespace site settings. Below, you’ll find step-by-step instructions for various use cases.

Option 1: Apply the Zoom Effect Site-Wide (All Images)

1. Zoom In on Hover for All Images

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:


/* Zoom In on Hover for All Images */
.sqs-block-image img {
    transition: transform 0.5s ease;
}
.sqs-block-image:hover img {
    transform: scale(1.1);
}

Save your changes to apply the effect to all images on your site.

2. Zoom Out on Hover for All Images

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code:


/* Zoom Out on Hover for All Images */
.sqs-block-image img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}
.sqs-block-image:hover img {
    transform: scale(1);
}

Save your changes to apply the effect to all images on your site.

Option 2: Apply the Zoom Effect to Specific Images Using Block IDs

To apply the zoom effect to specific images, you will need to locate each image’s unique block ID.

How to Find the Block ID

Open the page containing the image in your browser.
Right-click on the image and select Inspect.
Look for the unique identifier block-id-XXXX and make note of it.

1. Zoom In on Hover for a Specific Image

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, replacing #block-id-XXXX with the specific block ID:


/* Zoom In on Hover for Specific Image */
#block-id-XXXX img {
    transition: transform 0.5s ease;
}
#block-id-XXXX:hover img {
    transform: scale(1.1);
}

Save your changes to apply the effect to specific images on your site.

2. Zoom Out on Hover for a Specific Image

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, replacing #block-id-XXXX with the specific block ID:


/* Zoom Out on Hover for Specific Image */
#block-id-XXXX img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}
#block-id-XXXX:hover img {
    transform: scale(1);
}

Save your changes to apply the effect to specific images on your site.

Option 3: Apply the Zoom Effect to All Images on a Specific Page

If you prefer to apply the zoom effect to all images on a particular page, you’ll need to locate the page’s unique ID.

How to Find the Page ID

Open the page you want to target in your browser.
Right-click anywhere on the page and select Inspect.
Look in the <body> tag for page-id-XXXX and make note of the ID.

1. Zoom In on Hover for All Images on a Specific Page

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, replacing #page-id-XXXX with the specific page ID:


/* Zoom In on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
    transition: transform 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
    transform: scale(1.1);
}

Save your changes to apply the effect to all images on the specified page.

2. Zoom Out on Hover for All Images on a Specific Page

Go to Design > Custom CSS in your Squarespace dashboard.
Paste the following code, replacing #page-id-XXXX with the specific page ID:


/* Zoom Out on Hover for All Images on Specific Page */
.page-id-XXXX .sqs-block-image img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}
.page-id-XXXX .sqs-block-image:hover img {
    transform: scale(1);
}