Image color overlay in slider plugin, text above overlay (wordpress)

Question

I'm using the meta slider plugin for Wordpress. A big part of my design is a grey overlay on the slider. I can manage to get the overlay but it goes over the caption in the slider.

I've tried a lot and I haven't been able to do this on my own. How do I get the text above the overlay?

Answer 1

.metaslider .caption-wrap {
    background: rgba(50,50,50, 0.4);
    padding-top:13%;
}

.overlay:before {
    background:none;
}

Keep in mind though, that the above css should be loaded after the slider.css has been loaded, in order for the css rules to have a higher priority.

Answer 2

I just assigned a class called overlay in the metaslider caption box, then I edit the css under Customize mode.

.overlay img {
  background-color:white;
  opacity:0.7;
}