Semi-Transparent Overlay on Image

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.