Highlight images (on hover) on any background

Question

It is quite common to want certain images to be lit up (increase brightness) when your mouse pointer hovers over them.

One technique that I know of, that works on white backgrounds is to reduce opacity on hover, which in effect increases brightness by letting more white through. The problem is obviously that it will only work on a white background.

Is there any CSS that I can add to my images that will either

a. Add a white background to the images which fits exactly, so that the same light-up effect will take place on any color background, or

b. Achieve the same effect without adding white backgrounds or using opacity at all

Answer 1

encapsule your image with a div

<div class="brightness">
    <img  src="test.jpg">
</div>

and apply the good css :

.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

fiddle: http://jsfiddle.net/5yush/

Answer 2

image:hover { filter: brightness(50%); }