Yes, there is a way to do this. You could use a pseudo-element after to position a block on top of your background image. Something like this:
http://jsfiddle.net/Pevara/N2U6B/
The css for the :after looks like this:
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
edit:
When you want to apply this to a non-empty element, and just get the overlay on the background, you can do so by applying a positive z-index to the element, and a negative one to the :after. Something like this:
#the-div {
...
z-index: 1;
}
#the-div:hover:after {
...
z-index: -1;
}
And the updated fiddle: http://jsfiddle.net/N2U6B/255/