InsideTheSquare.co

View Original

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

See this content in the original post

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
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

.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



See this content in the original post

🌠 Image filter article β†’ insidethesquare.co/image-filters

❀️ Support my blog β†’ buymeacoffee.com/insidethesquare

πŸ“– Learn CSS for FREE β†’ insidethesquare.co/learn

1️⃣ Apply this code to a single section β†’ insidethesquare.co/resources/squarespace-css-targeting-tips

πŸ“‘ My Squarespace code collection β†’ insidethesquare.co/css

πŸ™‹β€β™€οΈ Have a question? Check out my code troubleshooting tips β†’ insidethesquare.co/code-help