Five Hover Effects for Images Using Squarespace CSS // Squarespace CSS Tutorial

Squarespace is notorious for changing its program layout (interface) multiple times a year. This video likely looks outdated, but the codes and concept are not! 
For the latest tutorials visit insidethesquare.co

The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ❤️

---

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics - grab my free Getting Started Guide here 👉 insidethesquare.co/learn
---
Ready for more codes? I've got you covered! 😎 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. Available now 👉 insidethesquare.co/css

---

This tutorial covers five different image hover effects you can create using custom CSS. Greyscale to full color and back. color inversion, and a blur effect too! Watch this tutorial to see them in action, and when you are ready to try it on your own, grab those copy and paste CSS codes below.

*****
The following code creates a gray-scale hover effect, turning a full color image black and white when someone moves their cursor over it.

.image-block:hover { filter: grayscale(100%);}

*****
This code turns a full-color image into a grey-scale one, turning it back to full color when someone moves their cursor over it. The transition part of this code makes it a little smoother but isn’t necessary to make it work.

.image-block { transition: filter .3s ease-in-out; filter: grayscale(100%);}
.image-block:hover { filter: grayscale(0%);}

*****
This CSS code will blur an image when a user moves their cursor over it.

.image-block:hover {filter: blur(5px);}

*****
The following code will invert the colors of an image when someone moves their cursor over it.

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

*****
This last code will lighten an image, showing it in full color when someone moves their cursor over it.

.image-block { -webkit-filter: opacity(50%); filter: opacity(50%);}

.image-block {transition: filter .5s ease-in-out; -webkit-filter: opacity(50%); filter: grayscale(50%);}

.image-block:hover { -webkit-filter: opacity(100%); filter:opacity(100%);}

▸▸▸ 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 at insidethesquare.co/css
---
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