スライダー画像の上に薄い黒のオーバーレイをのせたい

スライダー画像の上に薄い黒のオーバーレイをのせて、スライダー機能のタイトルやサブタイトルで設定して表示される白の文字をより、はっきり表示させたいと考えています。

自分なりに、ネットでCSSを調べながら、下記のような感じでやってみたのですが、箇所が違うのか反映されません。

.xo-slider-template-default .swiper-slide img {
position: relative;
}

.xo-slider-template-default .swiper-slide img {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

薄い黒のオーバーレイを反映させらればと思うのですが、そもそも可能でしょうか。

すみませんが、お願いします。