Adjusting overlay on images

General
1

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?

4

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;
}
5

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
6

Me too. Tried it but no change.

8

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

9

Still doesn’t work…see image attached.

reply
reply636×504 39.9 KB

10

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.

13

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;
}
14

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

15

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);
}
16

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

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
18

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

1 Like
19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.