JQuery cambiar el tono, la saturación, la gama de <img>?

Question

Quiero hacer una imagen más oscura si pasa el mouse sobre ella. ¿Es posible cambiar el matiz, la saturación o la gamma de un img con JQuery (o Javascript)?

Answer 1

¿Has probado PaintbrushJS o Pixastic biblioteca?

Answer 2

No es posible hacer esto utilizando solamente JavaScript (ya que no puede manipular archivos binarios), sin embargo se puede hacer esto con el elemento HTML5 <canvas> para ayudar.

Take a look here, hay algunas bibliotecas para ayudar.

Si lo que desea es que se desvanecen, cambiar la opacidad en vuelo estacionario, por ejemplo:

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

Answer 3

Mostrar y ocultar una semitransparente negro <div> sobre la parte superior de la imagen.

Answer 4

Ampliando la sugerencia de Marcelo, podría obtener una copia de su imagen en la etapa final más oscura, colocarla encima del original y variar su opacidad con el mouse sobre el mouse, como dijo Nick. Este método le permite hacer cualquier cosa con la transición de la imagen: cambie su matiz, saturación, etc. Se puede encontrar un código simple de animación de desvanecimiento de Javascript here.

Answer 5

Usted puede hacer esto en 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); 
} 

Hay un montón de otros filtros como el desenfoque, saturar, contraste, ...

easely puede usar jQuery para cambiar el css si lo desea.

Answer 6

Arreglo este prototipo que usa una solución de CSS multiproveedor para animar la saturación de la imagen al pasar el mouse. Hay muchas maneras de hacerlo en JS/jQuery, pero ¿por qué no hacerlo en 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;} 

Mira la DEMO aquí y el JSfiddle aquí

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