In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated! For the latest info, check out [ Ссылка ]
---
Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 [ Ссылка ]
---
In this tutorial, you’ll learn how to create 5 unique hover effects for a list item image in Squarespace 7.1
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.
🔗 Here is a link to my list of image filters that work with Squarespace: [ Ссылка ]
📄 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. Here is a link to a tutorial on how to set that up: [ Ссылка ]
🙋 If you need any help along the way, head on over to [ Ссылка ] to see my current support options.
Here are the codes from this tutorial. Have fun with your Squarespace website!
//-- 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}
---
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 [ Ссылка ]
---
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): [ Ссылка ] ❤️
---
🙋 Need some help? Visit [ Ссылка ] to see my current support options.
---
The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
---
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips #squarespacetutorial #learncssforsquarespace #listsections #imagehovereffects #squarespacehovereffects #hovereffects
