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

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

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

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

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

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

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

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