css - ベース div の高さと幅に一致するホバー div の作成

Question

したがって、ベース div とホバー div があります (マウスオーバー時に js でブロックが表示されます)。

とにかく、ホバー div の高さと幅をベース div の高さと幅に合わせるのに最も苦労しています。

問題はレスポンシブ コードが原因だと思います。また、ベース div では、画像が実際には別の背景画像の上にあり、幅と高さが 95% に設定されて境界効果が作成されます。

#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}

私は自分の作品をここのテストリンクにアップロードしました。

ご覧のとおり、2 番目の「カード」の上にホバー div が表示されています。「Facebookでサインイン」ボタンのある不透明な白いボックスは、下の歌手の画像を隠していると思われます. 私はそれを正しく動作させることができないようです:(

これが私のjsfiddleです

http://jsfiddle.net/leongaban/PWVBp/

現在のページの HTML:

<ul id="user-options">
<li>
    <img class="role-photo" src="../images/registration_fan_tile.png" alt="Fan"/>

    <h3>Fan</h3>
    <p>Calling all tastemakers! Influence Hollywood, don't just consume it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li style="">
    <div class="role-card-talent" style="position: relative;">
        <img class="role-photo" src="../images/registration_talent_tile.png" alt="Talent"/>

        <!-- Hover Controls -->
        <div class="hover_controls" style="display:block;">

            <a href="#" class="fbLoginBtn"><img class="fb-signin" src="../images/registration_signin_fb.png"></a>

            <div class="learn_about_pages learnMoreLink" tag="" style="margin:10px">
                <a href="#"><img src="../images/registration_info_icon.png">Learn More</a>
            </div>
        </div><!-- hover_controls -->
    </div><!-- role-card-talent -->

    <h3>Talent</h3>
    <p>Oh, Hai! Now you are on your way to being "connected." You're welcome. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</li>

CSS

#user-options {
    margin:0px; padding:0px; float:left; width:100%; list-style-type:none;
}
#user-options li {
    position: relative;
    float:left;
    width:20%;
margin: 1%;
    text-align: center;
    padding: 5px;
    background: url("../../images/one_background.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}
#user-options li img.role-photo {
    width: 95%;
    height: 95%;
    padding-top: 5px;
}
.hover_controls {
    position: absolute;
    margin: 0;
    top: 5px;
    left: -5px;
    padding: 5px;
    /*padding-top: 20px;*/
    width: 100%;
    height: auto;
    /*min-height: */
    text-align: center;
    color: #409ad5;
    font-size: 0.875em;
    font-weight: bold;
    background: rgba(255,255,255,.5);
    background-size: 100%;
}

.hover_controls a {
    color: #666;
    font-size: 0.750em;
}

.hover_controls img.fb-signin {
     width: 100%;
}