How to create filter hover effects for image galleries in Squarespace 7.1

June 18, 2024 insidethesquare

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

In this tutorial, I will show you how to create filter effects for gallery images in Squarespace 7.1 and how to use them for really cool looking hover effects.

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.

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!

See this content in the original post

Here is the example code from the tutorial for a Grid:Simple gallery design style

See this content in the original post

Here is the list of gallery section design style selectors:

Grid: Simple