Смена картинки товара

Интересует такая тема, возможно ли сделать так, чтоб на главной странице, к примеру в разделе "Новинки" и т.д, картинки товара были в черно-белом цвете, а при наведении курсора менялась на цветную. Встречал где то такую фишку, но не могу вспомнить где.

 

http://tradebenefit.ru/cherno-beloe-izobrazhenie-ili-element-css

попробуйте здесь поковырять. Готового решения не встречал, но то что по ссылке можно взять за основу.

 

добавить к стилям фильтр

Код:

.gray:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}

или такой кроссбраузерный http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

 

по ссылке, интересная штука, но что то не догоняю, как реализовать на деле

 

To apply a grayscale effect (color desaturation) to images across Firefox 10+, Firefox on Android, Internet Explorer 6 - 9, Chrome 19+ and Safari 6+ on desktop and iOS, use the following snippet below.

что бы реализовать данный эфект для картинки преобразования в серые тона в браузерах Firefox 10+, Firefox на Android, Internet Explorer 6 - 9, Chrome 19+ и Safari 6+ на десктопах и iOS
примерно так

Код:

img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img {
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");

-webkit-filter: grayscale(0%);

}

 

так это я на сайте видел, не вкуриваю куда это вставлять и в каком месте

 

в style.css в конце, а вот как - надо видеть что утебя)))))