javascript - cssを使用して不透明度のある他のdivにdivを合わせる

Question

私の要件は、最初の画像でわかるように、下部にある別の div と重なる div を取得することです。画像にカーソルを合わせると、2 番目の画像のような効果が得られます。

これが私のhtmlコードですが、マウスイベントを正しく処理する方法がわかりません。

<div id="container">
    <div class="overlay">This is overlay div.</div>
    <div class="content">This is contents div. This is contents div.</div>
</div>


#container {
    position: relative;
}

.overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}



 .overlay, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

しかし、それは私が望んでいたようには機能しません。誰か私にいくつかの提案をしてもらえますか?