css - マウスオーバー Div ディメンションの問題

Question

私は現在、画像のグリッドがあるサイトのセクションに取り組んでいます。画像の上にマウスを置くと、不透明な背景とテキストを含む別の div が表示されるように設定しようとしています。問題は、マウスオーバー div を親の同じサイズに一致させることができないことです。今のところ、両方向に粘着性があります。助言がありますか？ここにいくつかのコードがあります

<div class = 'picture-container'>
            <div class = 'picture-wrapper' id = 'top-left'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-right'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
            <div class = 'picture-wrapper' id = 'top-center'>
                <div class = 'onhover'>hello!</div>
                <img src = 'ds-map.png' height = '100%' width = '100%'>
            </div>
        </div>

.onhover{
    position:absolute;
    display:none;
    width:30%;
    height:100%;
    background-color:#F5D892;
    opacity:.4;
}


.picture-wrapper{
    width:30%;
    height:100%;
}

.picture-wrapper:hover .onhover{
    display:block;
}