Gray by Karl Horky

Make an image gray in all browsers.

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 alt

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

<img> tag with styles

<img src="img/color.jpg" class="grayscale" style="
  position  : absolute;
  top       : 0;
  left      : 50%;
  margin    : 0 0 0 -90px;
  padding   : 5px;
  border    : 1px solid #ddd;
">

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>

Toggling Grayscale

$('.grayscale').toggleClass('grayscale-off');