CODEWITHSUNDEEP
jquerycss
Charles Yeung
Charles Yeung

Reputation: 38805

jQuery - How to brighten an image

Hi
In jQuery, we can use the code as below, to make the image darkly. In opposite, how can we bright up an image?

$(this).hover(function() {
    $(this).stop().animate({ opacity: 0.5 }, 500);
},
function() {
    $(this).stop().animate({ opacity: 1.0 }, 500);
});

Upvotes: 3

Views: 5204

Answers (1)

Matt Ball
Matt Ball

Reputation: 359816

I'd use Pixastic for this. It has jQuery bindings if you want to take that route.

You can lighten or darken an image like this:

var img = new Image();
img.onload = function() {
    Pixastic.process(img, "lighten", {amount:0.5});
}
document.body.appendChild(img);
img.src = "myimage.jpg";

You could fake this effect by changing the opacity of the image, making sure that the background behind the image is white.

Upvotes: 7

Related Questions