/gray

Make an image gray in all browsers

Primary LanguageCSSMIT LicenseMIT

gray

Make an image gray in all browsers. Demo.

Support:

  • IE 6-9
  • IE 10-11 (inline SVG via JavaScript)
  • Firefox 10+, Firefox on Android
  • Chrome 19+, Chrome for Android 25+
  • Android Browser 4.4+
  • Safari 6+, Safari iOS 6+
  • Opera 15+, Opera Mobile 16+
  • BlackBerry Browser 10+

Installation

You can install with Bower:

bower install --save gray

Or use the CDN links:

//cdn.jsdelivr.net/jquery.gray/1.3.2/gray.min.css
//cdn.jsdelivr.net/jquery.gray/1.3.2/jquery.gray.min.js

Or you can just download it.

How to Use

  1. Add the CSS from gray.css.

  2. Add the plugin after jQuery at the bottom of the body.

    <script src="/js/jquery.gray.min.js"></script>

    The plugin automatically initializes for all elements with a class of grayscale. The plugin can also be called manually with:

    $('.my-grayscale-class').gray();

  3. Add your image with a class of grayscale.

    <img src="/img/color.jpg" class="grayscale">

    Images with CSS background-image, background-size and (numeric) background-position are also supported:

    <div style="
  background-image   : url(/img/color-sprite-lg.png);
  background-size    : auto 72px;
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"></div>

  4. (Optional) Add class of grayscale-fade if you want transitioning from grayscale back to color on hover

    <img src="/img/color.jpg" class="grayscale grayscale-fade">

  5. Revel in your absolute and utter awesomeness.

Changelog

  • v1.3.3: update minified js to match source
  • v1.3.2: remove grayscale on hover in ie6-9 (fade option), use same svg filter in polyfill as in css
  • v1.3.1: bugfix for empty gray class name
  • v1.3.0: rename fade class to grayscale-fade to resolve conflict with bootstrap
  • v1.2.0: IE shim: Copy styles from element to replacement element
  • v1.1.1: Improve documentation and demo
  • v1.1.0: Support for background images with basic background-size and background-position
  • v1.0.0: First basic version with support for <img> tags

TODO

  • background-size: cover, background-size: contain
  • feature detection for SVG filters instead of client detection
  • better JavaScript templating for SVG

License

MIT © kununu