Changing store category image overlay opacity

[Dilliblu]

Hi, I've set my category images to have the images set behind the text.

http://www.dandilionandblu.co.uk/store.html

Is there anyway to change the opacity of the overlay so that it's more transparent or a differnt colour?

It seems to be black at the moment and I'd like to change the colour to something warmer to tie in with my header image.

I understand html and css codes a little.

Any help would be much appreciated.

Thank you.

[BJ5 · Accepted solution]

Yea, it's fairly simple to do by adding this to Settings > SEO > Header Code, or adding to theme CSS if you've been doing that:

<style>
	.product-grid-layout--over .product-grid__overlay, .product-grid-layout--hover .product-grid__overlay
	{
		background: rgba(0,0,0,0.2) !important;
	}
</style>

I changed the opacity too 0.2 so it's less opaque (0.5 was default). You can also adjust the three RGB values (those three zeros) to something else if you want to try a color. Each number can go from 0 to 255. All 255 would make it white.

[Dilliblu]

@BJThank you so much that worked perfectly!