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.4.2/gray.min.css
//cdn.jsdelivr.net/jquery.gray/1.4.2/jquery.gray.min.js

Or you can just download it.

How to Use

Add the CSS from gray.css.
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();
```
The effect can be toggled with the grayscale-off class:
```
$('.grayscale').toggleClass('grayscale-off');
```

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.jpg);
  background-size    : auto 72px;
  background-position: -180px 0;
  display            : inline-block;
  width              : 180px;
  height             : 72px;
" class="grayscale"></div>

(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">
```
Revel in your absolute and utter awesomeness.

How it Works

In browsers that support css filters, the styles in gray.css will use CSS filters to turn the image gray.

The jquery.gray plugin uses the Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.

Changelog

v1.4.2: Add Firefox 35+ support, normalize cross-browser rendering
v1.4.1: Fix bug with display: none on parents
v1.4.0: Add support for programmatic toggling of grayscale
v1.3.6: Fix image size with resized img tag and grayscale-fade in polyfill
v1.3.5: Declare variables to fix error in strict mode
v1.3.4: Don't override existing modernizr
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

uttampanara/gray