i have no idea if this works

<div id="cboxrules" style="position:relative; margin:0 auto; width: 350px; font-size:0; float:right">
    <div id="cbox_base" style="width: 350px; height: 478px; z-index:0"
        onmouseenter="document.getElementById('rules').style.display='block';"
        onmouseleave="document.getElementById('rules').style.display='none';">
    Your Image Here
    </div>
    <div id="rules" style="position: absolute; top: 0px; left: 0px;width: 350px; height: 478px; background-color: rgba(0,0,0,0.5); z-index:1; overflow-y:auto; display:none;">
    <p style="color:#fff">CBOX RULES HERE</p>
    </div>
</div>