Yes.
You can do this entirely in CSS, but you will have to add some specific HTML plumbing for each image.
If you ever get tired of the extra plumbing, javascript could do most of the plumbing for you.
Here is a Fiddle of the CSS-only version:
http://jsfiddle.net/m1erickson/g3sTL/
The HTML:
<div class="outsideWrapper">
<div class="insideWrapper">
<img src="house-icon.jpg" class="coveredImage">
<canvas class="coveringCanvas"></canvas>
</div>
</div>
Of course, in your version, you would replace the image src with your dynamic database call to fetch the image.
The CSS:
.outsideWrapper{
width:256px; height:256px;
margin:20px 60px;
border:1px solid blue;}
.insideWrapper{
width:100%; height:100%;
position:relative;}
.coveredImage{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
}
.coveringCanvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-color: rgba(255,0,0,.1);
}