How to Create Zoom Hover Effects for Image Galleries in Squarespace 7.1

Apr 28

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

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

There are 6 main types of galleries, 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!

Download Transcript

Gallery Code Names:

Grid: Simple

.gallery-grid-item img

Grid: Strips

.gallery-strips-item img

Grid: Masonry

.gallery-masonry-item img

Slideshow: Simple

.gallery-slideshow-item img

Slideshow: Full

.gallery-fullscreen-slideshow-item img

Slideshow: Reel

.gallery-reel-item img

Zoom Effect Codes:

Combine these codes with the right gallery style code name from the list above

Zoom on hover

...img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} Gallery-code-name{overflow:hidden!important}

Zoom out on hover

...img{height:100%!important; width:100%!important; transform:Scale(1.2); overflow:hidden!important;} ...img:hover{transform:scale(1)} gallery-code-name{overflow:hidden!important}

Smooth zoom transition

...img:hover{height:100%!important; width:100%!important; transform:Scale(1.2); Overflow:hidden!important; transition-duration:1s} Gallery-code-name{overflow:hidden!important}