Revolution Slider 6 Background Image REAL OVERLAY with jQuery and CSS ::pseudo elements

[Georgich]

Hi guys wanna share with you some helpfull stuff.

As you know, Slider Revolution 6 is already released. There is an official solution from developer team about how to add semi-transparent overlay to your slides:

https://www.themepunch.com/faq/how-to-add-a-semi-transparent-overlay/

But, there is an issue with adding overlays with a SHAPE ELEMENTS. So, if you will add a slide animation, as you can see your shapes (background image overlays) would not have an animations which your slides have. On slides changes you will see this issue. Your shapes will be dissapearing. And there is no opition to animate shape similar to slides animations.

Second issue: if you will add a ::pseudo element to background image IT WILL LOADS ONLY AFTER slide was loaded and it will happens on EVERY slide. So…

So here is a hack for you, to ADD SEMI-TRANSPARENT OVERLAY TO A SLIDE right way.

1. First of all you need to give your slide an ID (in my case it would be “slide-01”)

2. Go to your Pro - Theme Options and add this code:

2.1 / CSS

#slide-01 > rs-sbg-px > rs-sbg-wrap > rs-sbg.overlayed:before {
	background-color: rgba(0,0,0,.5);
	content: "";
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 21;
}

“.rs-sgb” class have z-index: 20 by default. Sou you better give your pseudo element z-index: 21.

2.2 / JS

jQuery(document).ready(function($) {
	$("#slide-01 > rs-sbg-px > rs-sbg-wrap > rs-sbg").addClass("overlayed");
});

So your slide background with ID “slide-01” now will have a class “overlayed” which will apply on slide loading, and you will not see this “glitch issue”.

The REAL background image overlay which will animate with your slide background image

This solution works with Slider Revolution 6.0. I think, there is no over way to do this. If you can simplify this code or method - just let me know. It would be nice. See ya!