Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10
—
💕 Love this free Square space tutorial? You can donate via Paypal to help support my YouTube Channel https://www.paypal.com/paypalme/insidethesquare
—
This tutorial is for gallery images in the latest version of Squarespace, 7.1. If you are using an older version like Squarespace 7, check out this tutorial instead: https://youtu.be/vB11np4v3SA
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.
This is specific for gallery blocks and it’s one of my favorite effects to get really creative with! There are 6 main types of galleries, and all of them can be edited. If you want a rundown of your basic gallery options, be sure to check out my other training all about it: https://youtu.be/SICjQ3qLS7M
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!
//–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
Filters: combine these codes with the right gallery style code name from the list above
Grayscale on hover
…img:hover{filter:grayscale(100%)}
Grayscale filter, full color on hover
…img{filter:grayscale(100%); transition:2s}
…img:hover{filter:grayscale(0%)}
Blur on hover
…img:hover{filter:blur(5px)}
Blur filter, full color on hover
…img{filter:blur(5px); transition:2s}
…img:hover{filter:blur(0px)}
▸▸▸ 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 at https://InsideTheSquare.co/css
—
Need some help? Visit https://insidethesquare.co/code-help 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
