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 me.

Thanks in advance

CP

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:

<div class="white">
    <img src="image.jpg" alt="Image" />
</div>

CSS:

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

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