Серые картинки при наведении цветные

Всем привет) Давно не было уроков, и сегодня представляю новый урок от нашего сайта. Суть урока в том чтоб сделать картинки товаров на Вашем сайте все серые, а при наведении курсора на любую картинку и она будет становится сразу цветной.
Серые картинки при наведении цветные

Дополнение будет работать без проблем на всех версиях PrestaShop 1.4.x, 1.5.x, 1.6.x. Ничего сложно и глобального мы не будем делать, просто добавим стили для нашего шаблона. Также мы не будет изменять какой либо код, а просто добавим новый код в основной файл стилей.
Приступим:


Открываем файл global.css, находится он в themes/Ваша_тема/css/global.css, и в самый конец файла вставляем следующий код:
img { 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 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ }img:hover
{ filter: none; -webkit-filter: grayscale(0%); }

Вот и все:) Теперь все Ваши изображения в магазине будут серые, а как только Вы наведете на них курсор они будут становится цветные.
Видео урок:


0 comments

Only registered users can comment.