How to create list image hover effects in Squarespace 7.1

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 you’ll learn how to create 5 unique hover effects for a list item image in Squarespace 7.1

The codes from this tutorial are below, but this is just a few of the cool image filters that are available!

→ Check out the full list at insidethesquare.co/image-filters

A few pro tips before you dig in:

⚠️ This is specifically for version 7.1 - older versions of Squarespace don’t have list sections, but I do have another tutorial on image hover effects you can check out here. It’s an old one but a good one!

✨ There is more than one way to do this! This is just one approach of many because code is super customizable. 

📄 You can install these on a single page using page header code injection or a code block in a section above or below the list section. Learn more about single page instillation at insidethesquare.co/singlepage

🙋 If you need any help along the way, head on over to insidethesquare.co/code-help to see my current support options. 

Here are the codes from this tutorial:

Greyscale on hover:

 .list-item:hover .list-image {filter: grayscale(1);}

Grayscale to full color on hover:

 .list-item .list-image {filter: grayscale(1);}

 .list-item:hover .list-image {filter: grayscale(0);}

Inverted colors to normal on hover:

 .list-item .list-image {filter: invert(100%);}

 .list-item:hover .list-image {filter: invert(0%);}

Inverted colors on hover:

 .list-item:hover .list-image {filter: invert(100%);}

Color blend on hover:

 .list-item:hover .list-image {filter: grayscale(1); opacity:.5}

.list-item-media-inner {background: linear-gradient(45deg, blue, red)!important}