CSS Hover with background image and opacity

Question

I have a div, and when the user hovers on the div, I want a background with opacity and a background image like so:

.ml-thank-you-box-item:hover{
    opacity:0.5;
    background-color:#9b9b9b;
    background-image:url(box_item_hover_img.png);
    background-repeat:no-repeat;
    background-position:center;
}

but the background image in my hover is going behind images and content inside the div. What can I do to fix this?

Answer 1

Try this:

.ml-thank-you-box-item{position:relative}
.ml-thank-you-box-item:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
display:none;
background:#9b9b9b url(box_item_hover_img.png) no-repeat center;
opacity:0.5;
}
.ml-thank-you-box-item:hover:before{display:block}

DEMO