Darken homepage slider images

Hi,
how can I darken the images of the homepage slider via css? the usual tricks with the opacity etc. aren’t working (probably 'cause I’m applying them to the wrong part of the code)

can someone help?

thanks!
D.

Hi,

Please post a link to your website, so I can check.

Best Regards,
Csaaba

Hi Csaba,

thank you for your answer
here
http://mediationforconstruction.com/

(now it’s already kind of dark 'cause I edited the pics with photoshop, but of course a solution with css will be better)

thank you!
Davide

Hi,

You can darken your slider images with this Custom CSS:

.header-slider {
    background-color: black !important;
}

.slides-container .slide-item {
    opacity: 0.5 !important;
}

With the opacity value you can control how dark you want your slider images to be.

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

thank you.
It works fine, the only thing is that doing so also the title and subtitle of the slider are getting darkened … is there a way to avoid this?.

D.

Hi,

Then better use image overlay colors in Photoshop, on slider you can make it by making the slide item transparent and setting a background color ( with simple Custom CSS ).

Best Regards,
Csaba