Scale Up Grid Gallery Images

---

Description

Add a scale up hover effect to the images in a grid gallery section. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

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

Grid: Simple Layout

// Scale Up Grid Gallery - Simple Layout //

.gallery-grid-item img {
  transform: scale(1) !important;
  transition: all ease-in-out 0.8s !important;
}

.gallery-grid-item:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 0.8s !important;
}

Grid: Strips Layout

// Scale Up Grid Gallery - Strips Layout //

.gallery-strips-item img {
  transform: scale(1) !important;
  transition: all ease-in-out 0.8s !important;
}

.gallery-strips-item:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 0.8s !important;
}

Grid: Masonry Layout

// Scale Up Grid Gallery - Masonry Layout //

.gallery-masonry-item img {
  transform: scale(1) !important;
  transition: all ease-in-out 0.8s !important;
}

.gallery-masonry-item:hover img {
  transform: scale(1.1) !important;
  transition: all ease-in-out 0.8s !important;
}

---

Customize

Adjust the transform and transition values to your liking.

There are three separate codes that target each grid gallery type: Simple, Strips, and Masonry. Check your gallery section settings to see which gallery type you are using.

---