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)?

Solution 1

Have you tried PaintbrushJS or Pixastic library?

Solution 2

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

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

Solution 4

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/

Solution 5

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.

View more solutions

Comments

[Hans Wassink]

This still has very poor support. Current IE and Firefox still dont support it. Chrome, Safari and most mobile browsers do.

[Marco Prins]

This is not cross-browser compatible

[Pete Fecteau]

Thanks! I don't think it's viable answer because it's not JQuery.

[helgatheviking]

Why use a script if you can get the same effect with CSS? Anyway, I'm using it now and pumped that I found this. I'd upvote again if I could. :)