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,#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,#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/