Image Overlay Hover Effect for Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit https://insidethesquare.co/themes

Image blocks have a ton of built-in design features, but I wanted to use a little CSS to make them a bit more colorful, so that’s what we’re covering in this tutorial... literally. I’ll teach you how to cover an image with a solid color, and a gradient, and you'll learn how to turn it into a hover effect.

The codes in this video will work in both versions of Squarespace, making any image block look even more awesome.

Be sure to get creative with the colors and direction of your gradient codes, and head on over to insidethesquare.co/gradients to grab my free PDF with pre-made gradient codes you can use on your site.

---

Here are the cores:

Poster Image Overlay:

.design-layout-poster .image-overlay {
background: blue!important;
opacity: .8;
}

Poster Image Gradient:

.design-layout-poster {
background: linear-gradient(to right, red, blue);
opacity: .8;
transition: 2s
}

Poster Image Hover Effect:

.design-layout-poster:hover .image-overlay { background: blue!important;
opacity: .8;
transition: 2s
}
.design-layout-poster .image-overlay {
opacity:0;
transition: 2s
}