Overlay opacity on images

Site URL: https://indigo-dogfish-mnkf.squarespace.com/config/design/colors/section-themes/theme-editor

How do I remove overlay from images (or reduce value to zero) please? My image is a black illustration on a white background  but an overlay has been added.  If I add an image as a background I can reduce overlay value to zero, but this does not seem possible when adding images in Card.  Thank you

Try Home > Design > Color > Section Thémes > Click on your image on right > it will show setting on left.

or you can also add this to Home > Design > Custom CSS

.image-block .image-overlay {
    background: none !important;
}

Very helpful, thank you

I am trying to create two paragraphs of type separated by a heading. The paragraphs should be black and the heading orange. But as you can see, the bottom block of type takes the orange colour of the subheading. 

https://indigo-dogfish-mnkf.squarespace.com/config/design/colors/section-themes/theme-editor

On 5/28/2020 at 8:52 PM, HughJars said:

I am trying to create two paragraphs of type separated by a heading. The paragraphs should be black and the heading orange. But as you can see, the bottom block of type takes the orange colour of the subheading. 

https://indigo-dogfish-mnkf.squarespace.com/config/design/colors/section-themes/theme-editor

 

Can you share link to page in screenshot? /config is url for site owner

Hi @tuanphan

I need assistance adding to the coding I already have. I am having difficulty adding a clickable onto the images on my homepage. I want the user/viewer be able to hover what I already have and click on it and it opens up to the new page.

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

5 hours ago, naomiokita said:

Hi @tuanphan

I need assistance adding to the coding I already have. I am having difficulty adding a clickable onto the images on my homepage. I want the user/viewer be able to hover what I already have and click on it and it opens up to the new page.

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 2rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

 

edit this code

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}

to this

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
pointer-events: none;
}