html - 半透明の背景を暗くする画像

Question

ホバー時に半透明の背景を追加する背景画像を持つコンテナーがあります。これが私の（簡略化された）HTMLです：

<div class="container">
  <div class="overlay"></div>
    <img src="hi.jpg">
</div>

半透明のオーバーレイを実現する方法は次のとおりです。

.container:hover > .overlay {
  background-color: black;
  height: 100%;
  position: absolute;
  width: 100%;
  opacity: .2
}

ただし、コンテナーにカーソルを合わせると、その背景画像が黒い背景の影響を受けるだけでなく、画像がオーバーレイの背景の下にあるかのように画像も影響を受け、少し暗くなります。画像の z インデックスを 3 に設定してこれを改善しようとしましたが、まだ暗くなります。