How do I add a hover zoom/scale effect to images in Squarespace?

Image Hover Zoom Effect — Squarespace CSS

A hover scale effect makes images zoom slightly when the cursor moves over them. The trick is overflow: hidden on the container so the scaled image doesn't break the layout.

Keep the scale subtle — 1.05 to 1.1 is the sweet spot. Anything more looks jarring. A 0.3-0.4s transition duration feels natural.

/* Image blocks */
.sqs-block-image .image-block-wrapper {
  overflow: hidden;
}

.sqs-block-image .image-block-wrapper img {
  transition: transform 0.4s ease !important;
}

.sqs-block-image .image-block-wrapper:hover img {
  transform: scale(1.07);
}

/* Summary / card blocks */
.summary-item .summary-thumbnail-container {
  overflow: hidden;
}

.summary-item .summary-thumbnail-container img {
  transition: transform 0.4s ease !important;
}

.summary-item:hover .summary-thumbnail-container img {
  transform: scale(1.07);
}

Generate hover effects with our Animation GeneratorTry it free →