Colour Overlay to an image

[tapper65]

Hi
I’m trying to find some simple css to add a colour overlay to an image (not on hover a permanent overlay)
For example Im trying to add this colour #b5ae9a at 50% opacity
to this image http://79.170.44.87/jigsawdev.je/wp-content/uploads/2020/05/steve-royle-jigsaw-jersey.jpg
Any ideas?
Thanks

[prakash_s]

Hello Steve,

Thanks for writing to us.

It seems that you are using “WPBakery Page Builder”, you need to add a custom class in the Image element

Now add this custom CSS code under X/Pro–>Theme Option —>CSS to add a colour overlay on the image.

.custom-class-image .vc_single_image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(181 174 154 / 0.50);
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[motoramajsy]

ok great Ill give that a go, many thanks

[ruenel]

You are most welcome!