I think the following will work.
Wrap the image in a container:
<div class="img-overlay">
<img src="http://placekitten.com/200/200">
</div>
apply the following CSS:
.img-overlay {
border: 1px solid blue;
float: left;
position: relative;
}
.img-overlay:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
filter: alpha(opacity=40); /* internet explorer */
opacity: 0.4; /* fx, safari, opera, chrome */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
display: block;
}
See demo at http://jsfiddle.net/audetwebdesign/DkRJs/
The idea is to use absolute positioning to position an element over the image and then apply the opacity property.
If the older browsers don't support the pseudo element, you will need to place in the HTML code directly.
Note: I just reread the original question and realized that I solved the wrong problem. Sorry for the inconvenience.
IE8 Issue
I tested this in IE8 and just realized that you need the filter
property to make it fully backwards compatible.