Semi-Transparent Overlay on Image

[toad78]

Is there a way that I can create a semi-transparent overly on my slider’s images only and not over the text? An example of the tint I want to use can be found on the second and third slider images. I would rather use a CSS overlay than create a tint on every image in a photo editor—not user friendly.

I have tried:

#rev_slider_1_1 li:before    {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overlay: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}

But no affect was made on the image itself.

Thank you.

[RyanReese]

Do you have a jsfiddle, codepen, or live site where this issue is present?

[dresden_phoenix]

1. I dont think “overlay” is a CSS property. background:rgba(0,0,0,0.5); instead. Also remember to give your LI position:relative;

2. Covering your content may not cause problems with people who want to click on links tho… if what you have a COMMON background image on your CONTAINER element (lets say your UL), you could assign an background: rgba(0,0,0,0.5); to your LI …( or if your images are in the background of your IL) you could wrap the contents of the LI in a DIV and give the rgba background to the DIV.

Please note these solution are IE9 or later.

[toad78]

The link to the site is applied to the text ‘…my slider’s images…’.

dresden_phoenix:

You make a good point. Now I need to find a viable solution.

[ralphm]

@toad78

I have tried:

#rev_slider_1_1 li:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overlay: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}

But no affect was made on the image itself.

Rather than overlay: rgba(0,0,0,0.5);, it should be background: rgba(0,0,0,0.5);, but you also have to add the content property for :before and :after. E.g.

#rev_slider_1_1 li:before    {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
}

As dresden says, you also should add position: relative to the lis.

[toad78]

Thank you, gents.

Looks like I’m still not able to make it functional like I want, as the first slide still doesn’t have a tint to it.

ralphm, you mentioned to apply ‘content: “”;’ to li:after. So just using “li:before” won’t work alone?

[RyanReese]

It will. I think he’s saying that if you were to ever also use :after for something, the content property (content: ’ ') is needed for that pseudo element as well.

[PaulOB]

@toad78

So just using “li:before” won’t work alone?

The :before and after pseudo classes work hand in hand with the content property. Without the content property there is no ''generated box" to style and so there will be nothing styled or added to the element.

[toad78]

Okay, that makes some sense. There were example of uses with :before that never had the use of :after, which is why I questioned it.

As for my situation, I’m not making much progress. The element I need to apply the code isn’t correct, as I want to apply it to the images and not necessarily the ‘li’. But even changing the focus of the element to #rev_slider_1_1 li img doesn’t seem to make much difference.

It’s back to the drawing board.

[PaulOB]

@toad78

There were example of uses with :before that never had the use of :after,

I think you misunderstood me a little there (or I misunderstood you)

You can use :before or :after as you wish (you don’t need to use both) but when you use any one of them they must have the content property added or there will be nothing to style.

Basically :before means put the content ( from the content property) before the existing content in the element and :after means put it after the existing content in that element (not before or after the element itself but before or after any content in that element). The content property itself creates the box that you use (think of it like adding a span at either the beginning or the end of an element).

[toad78]

Thank you for the clarification, PaulOB.

Hopefully I can utilize ::before and ::after to make my tint work.

[PaulOB]

@toad78

as I want to apply it to the images

Images don’t have a before or after as they are replaced elements.You would need to target the list element instead.

e.g.

.rev_slider_wrapper li:after{
content:"x";
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:rgba(240,15,0,0.2);
z-index:1;
pointer-events:none;
}
.rev_slider .tp-caption{z-index:2}

The above seems to work on your site and gives a red tint to the image.

Some browsers (not IE) can use filters.

[toad78]

There we go! Oh awesome, PaulOB!
Thank you, gents.

[PaulOB]

@PaulOB

content:“x”;

the x can be removed as I just had it there for testing.

e.g. It should be an empty string:

content:"";