Как сделать элемент чёрно-белым и обратно цветным средствами CSS?

Как сделать элемент чёрно-белым и обратно цветным средствами CSS? Вот кроссбраузерный вариант создания чёрно-белого изображения или элемента из цветного.

Код CSS

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  -webkit-filter: grayscale(1);
}

Внимание! Возможно, Вы уже увидели строчку с

filter:  url(grayscale.svg#greyscale);

В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.

Достаточно просто создать файл grayscale.svg и добавить в него следующее:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0  0  0  1 0"/>
</filter>
</svg>

ИЛИ (если хотим избежать создание дополнительного SVG-файла) добавляем к уже созданному классу строку:

.grayscale {
/* тут будут упомянутые выше свойства */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

Теперь его убираем обесцвечивание, то есть делаем элементом снова цветным. Например, при наведении курсора на элемент:

Код CSS

.grayscale:hover { 
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: none;
  -webkit-filter: grayscale(0);
}

Пример работы, исходники - чёрно-белое изображение CSS

Добавляю к статье долгожданные пример работы и исходники.

Демонстрация Скачать исходники

Если в каком-то из браузеров не работает, напишите, пожалуйста. Буду дорабатывать)

Спасибо за внимание!)