How to create image overlay hover effects for Squarespace

content block

Oct 16

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 https://insidethesquare.co/gradients to grab my free PDF with premade gradient codes you can use on your site.

Pro Tip: In July 2022, Squarespace made a big change to the way sites are edited, and this tutorial is a little outdated, but the codes still work! To add custom CSS to your Squarespace site, navigate to your Pages menu, select Website and then scroll down to Website Tools. Here you’ll find Custom CSS - click on that option to open your custom code panel and add your code to your site.

Here are the codes from this tutorial:

/* Poster Image - Solid overlay code from insidethesquare.co */
.design-layout-poster .image-overlay {
background: blue!important;
opacity: .8;
}

/* Poster Image Gradient code from insidethesquare.co */
.design-layout-poster {     
  background: linear-gradient(to right, red, blue);
  opacity: .8;
  transition: 2s
}

/* Poster Image Hover Effect code from insidethesquare.co */
.design-layout-poster:hover .image-overlay {   
  background: blue!important;
  opacity: .8;
  transition: 2s
}

.design-layout-poster .image-overlay { 
  opacity:0;
  transition: 2s
}

Want to change one image block at a time? You can use it’s unique block id! This free chrome extension from Will Myers is an easy way to grab that info for your site:

SQUARESPACE ID FINDER