Brightening an image using styles or Javascript

Question

I would like to brighten an image on my webpage on mouseover using css or javascript. Ive seen some examples using opacity and filters in styles but they dont seem to work for m

Answer 1

[UPDATE]

A pure CSS solution would be to use CSS filters:

img:hover {
    filter: brightness(1.5);
}

Here we add 50% brightness to all images on hover.

---

Why not? You can always set the background of the parent container to #fff (white) and then lower the opacity of the image.

HTML:

CSS:

.white { background: #fff; }
img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Another solution is to use a JavaScript library, such as Pixastic.