cover div or image with transparent color

Question

I have a div, and an image inside it. on the image I have the DB results, designed and placed with relative location on each div.
I want to cover some of the results (the most interesting one with color overlay), see image bellow:

How should I do it without adding another div on top of it?
backgroup will not help here, because the image is higher z index than the div..

I want to be able to do it as easiest as I can with CSS, because I will get the property from the DB query , and set the class for the relevant result rows..

Does someone has creative idea please? :)

Thanks.

Answer 1

div {
    position: relative;
}
div:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 0, 0, .5);
}

You can also change the top, right, bottom and left values to offset the overlay from the image borders.

Answer 2

well, with all the restrictions you have, the only thing I can think is this:

div{background:#f00}
img{opacity:.5}

not very elegant, but will work