Image block overlay color in 7.1

Site URL: https://whale-mushroom-t6kh.squarespace.com

I'm not sure why when I change the image lock to a card (anything other than inline), it adds an opacity over the image. How do I remove the image overlay?

Add this to your CSS

#block-your block id .image-overlay {display:none !important;}

Hello!

In 7.1

Go to Design > Colours >
Click on the edit button on the colour theme you have chosen
Scroll down to Image Block: Card (or Poster or Collage. etc...)
Click on Image Overlay > change the colour or opacity there.

On 4/7/2020 at 1:11 AM, coswebb said:

Hello!

In 7.1

Go to Design > Colours >
Click on the edit button on the colour theme you have chosen
Scroll down to Image Block: Card (or Poster or Collage. etc...)
Click on Image Overlay > change the colour or opacity there.

Hi, I can't see an opacity option there, am I missing something? Thank you.

On 2/22/2020 at 6:10 PM, allisonstratton820 said:

Add this to your CSS

 

#block-your block id .image-overlay {display:none !important;}

 

Hi, Is this in the site wide css or the page header? I'm not seeing a difference in either place. Thanks for any assist.

On 9/17/2020 at 8:13 PM, Khechog said:

Hi, Is this in the site wide css or the page header? I'm not seeing a difference in either place. Thanks for any assist.

If you share link to page where you insert image. We can help easier.

On 9/17/2020 at 2:12 PM, Khechog said:

Hi, I can't see an opacity option there, am I missing something? Thank you.

Hi was there any development with this - i am having the same issue? Many thanks

You have to slide the colour from full strength down the gradient to 0 opacity.

I was flustered by this image overlay issue, too. My "card" images were greyed-out, looked terrible. After checking out the CSS, I found a solution and added this snippet to Design > Custom CSS:
 

.sqs-block-image .image-overlay, .sqs-block-image .sqs-image-content::after, .sqs-block-image .image-block-wrapper::after {
    opacity: 0;
}

Originally, the default opacity was set to 0.1, which was causing the "grey-out" problem. As soon as I pasted in this CSS, all of the grey image overlays in my cards disappeared.

If anybody else is able to clear up their image display issues with this CSS, please let me know. I've written to support, too, so hopefully they'll look into it.

Hi i am trying to use 

.sqs-block-image .image-overlay, .sqs-block-image .sqs-image-content::after, .sqs-block-image .image-block-wrapper::after {
    opacity: 0;
}

and its not working for me using on image 

blocks, image cards, everything as an ugly overlay colour 

On 4/12/2021 at 11:27 AM, christina_marie_333 said:

Hi i am trying to use 

.sqs-block-image .image-overlay, .sqs-block-image .sqs-image-content::after, .sqs-block-image .image-block-wrapper::after {
    opacity: 0;
}

and its not working for me using on image 

blocks, image cards, everything as an ugly overlay colour 

Can you share link to a page where you use image block? We can help easier

@sarahcreates Thank you! This worked. 

a screenshot of Site Style/Colours where I eventually found the colours to remove the overlay

Hello - I am trying this solution but I don't see the image overlay option anywhere in Site Styles. Please let me know how I can adjust the image overlay setting in 7.1?

On 7/6/2021 at 2:18 AM, supplyhero said:

Hello - I am trying this solution but I don't see the image overlay option anywhere in Site Styles. Please let me know how I can adjust the image overlay setting in 7.1?

What is your site url?

Go here (replace with your own individual edit site link): https://REPLACE-SITE-URL-HERE.squarespace.com/config/design/site-styles/colors

Each section of your site has the name of the theme being used on the top right (highlighted with red border below, in my case it's "Lightest 2")

On the Colors side panel, find the theme where you want to remove the image overlay from.  Click on the Edit button.

The side panel updates to an "Edit Theme" panel, where you can scroll down to about 2/3rds where you start seeing "Image Block" sections.  Find the image block you are using for your image, and click on the Image Overlay item.

That opens a couple of new options, but you are going to move the gradient circle in the bar all the way to the left.

 -> 

Now save your changes by clicking the Done button on the top left.. and you're done!

Hi,

This is exactly what I select but still don't see any image overlay. Is there a setting anywhere else that can turn on the image overlay?

@Vivienne13

If you used Custom CSS to turn off the overlay effect then using SS editing feature would have no effect.

Have you installed Custom CSS?

It is also possible that the particular image you want an overlay effect on doesn't not support the overlay image. Without being able to see the image there is no way for us to know.

I also can't figure out how to add an overlay to my Image Block Poster. 

These are my only options.

1 hour ago, aner97 said:

I also can't figure out how to add an overlay to my Image Block Poster. 

Many images in SS have a default overlay built-in. The color for the overlays for image block poster can be controlled by editing Site Styles > Colors, edit the appropriate color theme.

The overlay opacity is fixed at a very low opacity. If you need to change those then use custom CSS.

Let us know how it goes.

Oh you're right... it's there just super light. I'll enhance it with css. Thanks!