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

Answer 2

You could use CSS sprites. Create 2 versions of the image: one normal, one bright and combine them into 1 image using Photoshop or whatever you use.

There's a good explanation of what CSS sprites are here.

Of course, this may not be something you could use on your site. For example, it's probably not something you'd want to use on large images (they'd double in size). You also couldn't do it this way if the images you want to brighten come from outside sources or are uploaded by users for example. It would work well for things like navigation bar images and other UI elements.