[Elementor Help]Reduce the Opacity of the Black Overlay

"Reduce the Opacity of the Black Overlay," is a question raised by a WordPress Elementor plugin user. I will provide solutions here.

What's the problem?

Can you please let me know how I can reduce the opacity of the black overlay that automatically appears over the bottom of the slider images?

Also, when I select the option to place the arrows on the outside of the slider, they remain on the inside. Is there another setting for this?

Thank you!

The page I need help with: https://saramoulton.com/

Reduce the Opacity of the Black Overlay

The problem is reproduced as above.

Code to "Reduce the Opacity of the Black Overlay"

Just add this CSS on your page and it will work:

.anwp-pg-wrap .anwp-pg-post-teaser:not(.anwp-pg-post-teaser--inner-cover-link):hover .anwp-pg-post-teaser__thumbnail-bg{background: none !important;}

How to add additional CSS?

First, go to click on the "Customize" button in WordPress.

go to customize

Then click on "add additional CSS"

Add additional css

There you can add the code.

Copy the above code and paste it into the "Additional CSS" field and Don't forget to Publish!

publish new css

Please note that modifying the code requires caution. Always make a backup of your theme and site before making changes. The best way to check them is by testing them on the staging site(s) and if you have a third-party plugin, consider plugin conflicts as well.