Changing the Image Overlay Opacity on Image Blocks in Squarespace 7.1

Apr 21

Article

This tutorial comes in the form of a question from Ian.

Question:
Hi Will - you've been a great help this past week! Thank you! Just wondered if it's possible to up the opacity on image blocks (poster in my case). 7.1 only allows it to be a slight colour overlay but I'm looking for it to be a higher opacity so that the text on the image block is more readable. Hope that makes sense. If this doesn't exist, is this something you might be able to look into?
- Ian

Check out my tutorial tab for video response.

The standard way to add an opacity to an image in CSS is to place an element on top of the image and give that element an opacity. We don’t want to change the image itself.

Squarespace has actually already done this step of adding the div, so all we need to do is adjust the opacity property.

In the code section, I’ve provided a CSS snippet for each each different image block that you might want to apply an opacity too.

Tutorial

Code

CSS

In all of the below examples, the image opacity layer will change from 10% opaque to 50% (0,.5) opaque.

Change the

/*All Image Blocks*/
  .sqs-block-image .image-overlay {
    opacity:.5;
  } 

/*Regular Image Block*/
  .sqs-block-image .image-block-wrapper:after{
    opacity:.5;
    background-color:#000
  }

  /*Poster Block*/
  .sqs-block-image .design-layout-poster .image-overlay {
    opacity:.5
  } 

/*Card Block*/
  .sqs-block-image .design-layout-card .image-overlay {
    opacity:.5
  }

/*Overlap Block*/
  .sqs-block-image .design-layout-overlap .image-overlay{
    opacity:.5
  }

/*Collage Block*/
  .sqs-block-image .design-layout-collage .image-overlay{
    opacity:.5
  } 

/*Stack Block*/
  .sqs-block-image .design-layout-stack .image-overlay{
    opacity:.5
  }  