jQuery Plugin To Change Colors Of Your Images - colorMatrix.js

colorMatrix.js is a cross-browser jQuery plugin that makes use of SVG feColorMatrix or CSS filters to change colors of your images on mouse hover.

How to use it:

1. Place the jQuery colorMatrix.js plugin's stylesheet in the head section.

<link href="path/to/jquery.colormatrix.css" rel="stylesheet">

3. Add the CSS class 'grayscale' or 'sepia' to your images.

<img src="1.jpg" class="sepia">
<img src="2.jpg" class="grayscale">

4. You can also apply the colormatrices to your images via JavaScript.

$("img").colorMatrix({
  // OPTIONS
});

5. Configuration opitons.

// grayscale or sepia
className: "sepia", // invert, sepia or greyscale
matrixType: "matrix",
ids: ["sepia", "normal"],
values: [
  /* Sepia */
  "0.393 0.769 0.189 0 0
  0.349 0.686 0.168 0 0
  0.272 0.534 0.131 0 0
  0     0     0     1 0",
  /* Normal color values */
  "1     0     0     0 0
  0     1     0     0 0
  0     0     1     0 0
  0     0     0     1 0"
]

Change log:

2017-05-07

• Unsafe attempt error fix

2015-05-07

• Added inverted color support

---

This awesome jQuery plugin is developed by mzilverberg. For more Advanced Usages, please check the demo page or visit the official website.