Jump to content

Image block overlay color in 7.1

Recommended Posts

  • 1 month later...

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.

One day I will work for [Brad Good][1]. [1]: https://www.bradgood.net/

Link to comment
  • 5 months later...
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.

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 3 weeks later...
  • 1 month later...

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.

Link to comment
  • 3 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
  • 1 month later...
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?

image.thumb.png.ce1a215ef43a283d7e0f5916217e3555.png

What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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")

themeSquarespace.thumb.png.69a4d138f5919a5d139c148dc0e65526.png

 

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

image.png.79c4b73c1b6bb5f0c22a2288c830de2f.png

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.
image.png.37dececc1007e72847182155edea6374.png

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.

image.png.c743f0ca83ffdcc059a0a94efe2045f3.png -> image.png.ebe91aee5beb99fd07df4214c4a07611.png

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

Link to comment
  • 4 weeks later...

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 5 months later...
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.

345298737_ScreenShot2022-03-22at10_10_36AM.png.6bba5c5933b36ceb1b0aefd4a2cd2be2.png

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.