Revolution Slider Background Layer CSS

Question

I'm trying to set up two types of slides in Revolution slider. There will be the main background image for the slide, then a semi-opaque layer taking up 40% of the left side or the right side of the slide, with a text layer above that. I have the following css that can achieve the semi-opaque layer for one side (right or left, in the case below, left side) using the 'after' psuedo selector:

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

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

This takes care of the one side of the transparency but not the other, so I need a slide-specific class which adds a "left" or "right" property to the parent .slotholder class. Any suggestions?

Answer 1

you can try to use also :before for the right side, please try use this css

.rev_slider .slotholder:after, .rev_slider .slotholder:before{
 width: 40%;
 height: 100%;
 content: "";
 position: absolute;
 top: 0;

 pointer-events: none;

 /* black overlay with 50% transparency */
 background: rgba(0, 0, 0, 0.5);
}
.rev_slider .slotholder:before{
   right: 0;
}
.rev_slider .slotholder:after{
  left: 0;
 }

Answer 2

In the "Link & Seo" section, there is a field to add a class to the <li> of the slide - You can add a class (e.g. "right-text", "left-text") and apply the appropriate css rule, e.g.

left-text .slotholder:after{
    width: 40%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;

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