Transparent overlay only for one rev slider

[ccbeglin]

I have two rev sliders on my homepage. I would like a 30% transparency overlay on the masthead slider, and no overlay on the one at the bottom of the page. Within the custom css of the masthead slider I’ve added:

.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: “”;
position: absolute;
left: 0;
top: 0;
pointer-events: none;

/* black overlay with 30% transparency */
background: rgba(0, 0, 0, 0.5);

}

This works to add an overlay, but it also adds one to the slider down the page. On that slider css, I add:

.rev_slider .slotholder::after {
background-color: transparent;
}

This works to remove the overlay, but also removes it from the masthead. Can you please help me customize the transparency overlay so that it only appears on the masthead slider?

My url is http://pacify2dev.wpengine.com/

Thank you!

[friech]

Hi There,

Thank you for writing in, please update your selector to:
.x-slider-container.above .rev_slider .slotholder:after
that way it will only apply to the slider that is set above the masthead.

.x-slider-container.above .rev_slider .slotholder:after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.5);
}

Hope it helps,
Cheers!

[ccbeglin]

Thank you for your response. Unfortunately that still removes the transparency from both sliders…

[jade]

Hi there,

The page requires a login. Please provide the login information in a secure note so that we can check it.

Thank you.