Usual

View Original

Image Zoom Hover Effect

Paul Reeves

Hover Zoom In Plugin Effect

Hover Zoom Out Plugin Effect

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code:

See this content in the original post

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

2. Zoom Out on Hover for All Images

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code:

See this content in the original post

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code, replacing #block-id-XXXX with the specific block ID:

See this content in the original post

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

2. Zoom Out on Hover for a Specific Image

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code, replacing #block-id-XXXX with the specific block ID:

See this content in the original post

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code, replacing #page-id-XXXX with the specific page ID:

See this content in the original post

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

  1. Go to Design > Custom CSS in your Squarespace dashboard.

  2. Paste the following code, replacing #page-id-XXXX with the specific page ID:

See this content in the original post

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

Need Help?

If you need further assistance with installation or customization, reach out to us at letstalk@usual.ie. We’re here to help!