Five Image Hover Effects for Images Using Squarespace CSS

This tutorial covers five different image hover effects you can create using custom CSS. From 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%);
}

The following 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%);
}

The following 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%);
}

The following 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%);
}


SUPER IMPORTANT SIDE NOTE

All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.

If you are still pretty new to CSS, this is something I cover in my free Getting Started with CSS guide. Definitely check it out if you are curious about CSS or code in general: