JQuery change hue, saturation, gamma of <img>?

Question

I want to make an image darker if you hover your mouse over it. Is it possible to change the hue, saturation or gamma of an img with JQuery (or Javascript)?

Answer 1

Have you tried PaintbrushJS or Pixastic library?

Answer 2

Show and hide a semi-transparent black <div> over the top of the image.

Answer 3

It is not possible to do this using only JavaScript (since it can't manipulate binary files), however you can do this with the HTML5 <canvas> element to help.

Take a look here, there are some libraries out there to help.

If you just want to fade it, change the opacity on hover, for example:

$("img").css({ opacity: 0.5 }).hover(function() {
  $(this).animate({ opacity: 1 });
}, function() {
  $(this).animate({ opacity: 0.5 });
});