How to create image zoom hover effects for Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

In this tutorial, I will show you how to create a zoom-in hover effect for on-page images in Squarespace.

This tutorial is specifically for on-page images, not galleries or products, those have different “code names” in CSS so I am covering them in different tutorials.

There are 6 main types of images, and all of them can be edited individually.

Now all of the effects we are creating today are done with a little custom css magic and I will walk you through it step by super simple step in this video.

The codes we are using are below, but be sure to watch the whole tutorial so you understand how to use them!

Here are the codes:

Image Code Names

.sqs-block-image .design-layout-inline

.sqs-block-image .design-layout-poster

.sqs-block-image .design-layout-card

.sqs-block-image .design-layout-overlap

.sqs-block-image .design-layout-collage

.sqs-block-image .design-layout-stack

---

Zoom codes to combine with the image names above!

Zoom on hover

img:hover {transform: scale(1.1);}

Smooth zoom transition

img:hover {transform: scale(1.1); transition: .4s;}
img{transform: scale(1); transition: .4s;}

Zoom out on hover

img {transform: scale(1.1); transition: .4s;}
img:hover {transform: scale(1); transition: .4s;}

Don’t forget “overflow:hidden” from the 4:45 minute mark!