JQuery change hue, saturation, gamma of ?

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

I put together this prototype that uses a cross-browser, CSS only solution to animating image saturation on hover. There's planty of ways to do it in JS/jQuery but hey why not just do it in CSS?

img[class*="filter-resat"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+
    filter: gray; // For IE 6+
    -webkit-filter: grayscale(100%); // for Chrome & Safari

    // Now we set the opacity
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE
    filter: alpha(opacity=40); // Chrome + Safari
    -moz-opacity: 0.6; // Firefox
    -khtml-opacity: 0.6; // Safari pre-webkit
    opacity: 0.6; // Modern

    // Now we set up the transition
    -webkit-transition: all 1.0s ease;
    -webkit-backface-visibility: hidden;
}

img[class*="filter-resat"]:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

// You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;} 

Check out the DEMO here and the JSfiddle here

http://jsfiddle.net/buttonpresser/x6GfX/show/light/

Answer 2

You can do this in CSS

IMG:hover
{
    -ilter: brightness(0.7);
    -webkit-filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -o-filter: brightness(0.7);
    -ms-filter: brightness(0.7);
}

There's a bunch of other filters like blur, saturate, contrast, ...

You can easely use JQuery to change the css if you want.

Answer 3

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

Answer 4

Extending Marcelo's suggestion, you could have a copy of your image in the final, darker stage, put it on top of the original, and vary its opacity on mouse hover like Nick said. This method allows you to do anything with the image transition: change its hue, saturation etc. A simple Javascript fade animation code can be found here.

Answer 5

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 });
});

Answer 6

Have you tried PaintbrushJS or Pixastic library?