How to make slider images darker?

Question

I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3 over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.

So, i need to put this overlay just between slide image and slider controls. I`ve found code with image

<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>

Then i wrote this

 $('.tp-bgimg').before('<div class="slider-area-overlay"></div>');

Nothing change. I dont know why.

Next step: lets do it via css.

.tp-bgimg { position: relative; }

.tp-bgimg:before {
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    content: "";
}

Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.

I really have no idea how to decide this problem, please help me.

Answer 1

I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:

.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

The secound entry will do it for this specific slideshow (#rev_slider_2_1).

To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:

.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
    content: '';
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: rgba(30,30,30,0.5);
}

Answer 2

Just incase for video add z-index and change css class:

.rs-background-video-layer:before {
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        z-index:1;
        background: rgba(0, 0, 0, 0.3);
    }

Answer 3

Found a super easy way that works!

Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.

Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.

Can't find it? Check this link.

https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/

Scroll to step 3. Adjust the Responsive Alignment.

Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.

Answer 4

The Slider Revolution FAQ offers 3 solutions to this:

• Option 1) Enable their built-in overlay

  This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:

  

• Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide

  I personally added it to the Global Slider CSS, so it affected all my slides.

  1. If your individual slides have captions:

     .rev_slider .slotholder:after {
         width: 100%;
         height: 100%;
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         pointer-events: none;
     
         /* black overlay with 50% transparency */
         background: rgba(0, 0, 0, 0.5);
     }
     

  2. If your individual slides do not have captions:

     .rev_slider:after {
         width: 100%;
         height: 100%;
         content: "";
         position: absolute;
         left: 0;
         top: 0;
         z-index: 99;
         pointer-events: none;
     
         /* black overlay with 50% transparency */
         background: rgba(0, 0, 0, 0.5);
     }
     

• Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.

  The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.

  

---

The solutions and instructions provided by Slider Revolution are available here.

Answer 5

First you must to extend style of .rev_slider .slotholder (not of .tp-bgimg), because the start animation creates additional elements.

Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.

Try this, it will work well.

.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 99;
    background: rgba(0,0,0,.5);
}