Hover & Zoom -For Image Blocks In Squarespace 7.1

Add a zoom in effect to the image block when hovered. This plugin uses css editor and works with all template families.

How To Install:

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the codes below into the Custom CSS Editor box.

To target all images on site use code below:

// Zoom Me In Hover - Image Block //

.sqs-block-image img {
  transform: scale(1) !important;
  transition: all ease-in-out 1.5s !important;
}

.sqs-block-image:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 1.5s !important;
}

To target a specific image or images:

Use the tool 🔍 Squarespace ID Finder Chrome Extension. Activate the extension and click on the image you would like to apply an effect to. Copy the block ID and replace it in the #block ids section of your code. Repeat this process for as many images as you would like to target.

// Zoom Me In Hover - Specific Image Block Only - replace block IDs # //

#block-5a3d3de60581bcc8de2e img {
  transform: scale(1) !important;
  transition: all ease-in-out 0.5s !important;
}

#block-5a3d3de60581bcc8de2e:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 0.5s !important;
}

Customize:

Adjust the scale and transition values in both codes to your liking. The code works for all image card block styles - including inline, poster, card, overlap, collage, and stacked.

Article Source: Ghost Plugins