jQuery Gray Plugin Demos

Color

Gray

<img> tag

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

<img> tag with transition

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

<img> tag with styles

<img src="img/color.jpg" class="grayscale" style="
  position: absolute;
  top     : 0;
  left    : 50%;
  margin  : 0 0 0 -90px;
">

CSS background

<div style="
  background-image: url(img/color.jpg);
  display         : inline-block;
  width           : 180px;
  height          : 72px;
" class="grayscale"></div>

CSS sprite background

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

CSS sprite background with background-size

<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>