JQuery cambia tonalità, saturazione, gamma di <img>?

Question

Voglio rendere un'immagine più scura se si passa sopra il mouse. È possibile modificare la tonalità, la saturazione o la gamma di una img con JQuery (o Javascript)?

Answer 1

Hai provato la libreria PaintbrushJS o Pixastic?

Answer 2

Non è possibile farlo utilizzando solo JavaScript (poiché non può manipolare file binari), tuttavia è possibile farlo con l'elemento HTML5 <canvas> per aiutare.

Take a look here, ci sono alcune librerie là fuori per aiutare.

Se si desidera solo a svanire esso, modificare l'opacità al passaggio del mouse, ad esempio:

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

Answer 3

Visualizza e nascondere un semi-trasparente nero <div> sopra la parte superiore dell'immagine.

Answer 4

Estendendo il suggerimento di Marcelo, potresti avere una copia della tua immagine nella fase finale più scura, metterla sopra l'originale e variare la sua opacità al passaggio del mouse come ha detto Nick. Questo metodo ti consente di fare qualsiasi cosa con la transizione dell'immagine: cambiare tonalità, saturazione, ecc. Un semplice codice di animazione dissolvenza Javascript può essere trovato here.

Answer 5

Si può fare questo 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); 
} 

C'è un mucchio di altri filtri come sfocatura, saturare, contrasto, ...

È possibile easely utilizzare jQuery per cambiare il CSS, se si desidera.

Answer 6

Ho messo insieme questo prototipo che utilizza una soluzione cross-browser, solo CSS per animare la saturazione delle immagini su hover. C'è un sacco di modi per farlo in JS/jQuery ma hey, perché non farlo 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;} 

Scopri i DEMO qui e la JSfiddle qui

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