title: How to make slider images darker?
body: <p>I have revolution slider installed on my WordPress. The aim is to put a dark overlay with <code>opacity=0.3</code> 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. </p>
  
  <p>So, i need to put this overlay just between slide image and slider controls. I`ve found code with image</p>
  
  <pre><code>&lt;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;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then i wrote this</p>
  
  <pre><code> $('.tp-bgimg').before('&lt;div class="slider-area-overlay"&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Nothing change. I dont know why.</p>
  
  <p>Next step: lets do it via css.</p>
  
  <pre><code>.tp-bgimg { position: relative; }
  
  .tp-bgimg:before {
      background: rgba(0,0,0,.5);
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      content: "";
  }
  </code></pre>
  
  <p>Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.</p>
  
  <p>I really have no idea how to decide this problem, please help me.</p>