Adjusting overlay on images

Hello team,

I want to adjust the gray overlay darkness on the heading image and listing categories’ images.
From where and how can I adjust this?

Please try this CSS snippet

.header-hero::before{
	background-color: rgba(0,0,0,0.9);
}

.hp-listing-category--view-block .hp-listing-category__image::after{
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
}

Thanks Yevhen. I have applied the above to Appearance/Customize/Additional CSS section.
However, nothing changed. Both heading and categories’ images have dark overlay as before. I have altered the values and tried couple of times, but still no change.

1 Like

Me too. Tried it but no change.

Please make sure that you have correctly put and adjusted this CSS snippet. It was tested locally and seems to be ok

Before changes

After changes

Still doesn’t work…see image attached.

Not working with my case too.

@yevhen
So what I did was I went to Appearance/Customize/Additional CSS section, then pasted the CSS snippet you mentioned above as is.
Then I adjusted the rgba values, for example;

background-color: rgba(0,0,0,0.9);
to
background-color: rgba(0,0,0,10);

background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
to
background-image: linear-gradient(to bottom, rgba(0, 10, 0, 5), rgba(0, 1, 0, 0.5)) !important;

Although, nothing changes.

Did Appearance>>Customizer>>Additional CSS and copy pasted the code below, but there was no change on the images (they are still darker than the actual images)

.header-hero::before{
	background-color: rgba(0,0,0,0.9);
}

.hp-listing-category--view-block .hp-listing-category__image::after{
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
}

Please try to adjust 0.9 in this code snippet to change the overlay level for the header image. It can have values from 0 to 1 (0.1, 0.2, and so on until 1)

.header-hero::before{
background-color: rgba(0,0,0,0.9);
}

And please try to change 0.5 in this code snippet to change the overlay level for category images. It can have values from 0 to 1 (0.1, 0.2, and so on until 1)

.hp-listing-category--view-block .hp-listing-category__image::after{
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) !important;
}

If you are not familiar with code customization please consider hiring someone for custom work https://fwd.cx/hLhc73mQCD9R

I’ve used this one and it seems to work for me:

.header-hero--cover.header-hero--large::after{
	background-color: rgba(0,0,0,0.1);
}

@osms.co.ke
Thanks! This was helpful.
As suggested, I changed “before” to “after” and it worked with the hero image overlay.

Still working on the category image overlay.

1 Like

This one worked for me on the category image:

.hp-listing-category--view-block .hp-listing-category__image a::after{
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) !important;
}

I was using inspect element to see what the original code looks like.

2 Likes

@osms.co.ke
This worked with my case as well. Thank you so much!

1 Like