Интересует такая тема, возможно ли сделать так, чтоб на главной странице, к примеру в разделе "Новинки" и т.д, картинки товара были в черно-белом цвете, а при наведении курсора менялась на цветную. Встречал где то такую фишку, но не могу вспомнить где.
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%); }