Как изменить цвет картинки при наведении указателя мыши с помощью CSS?
На многих сайтах есть блок, как например, наши клиенты. В этом блоке обычно помещают товарные знаки фирм, которые по умолчанию имеет черно-белый цвет. Однако, если навести на них курсор мыши они приобретают первоначальный цвет. Таким образом уменьшается цветовой шум страницы, что делает ее дизайн более согласованным.
Вот как можно добиться данного эффекта с помощью только лишь CSS:
HTML код:
<img class="grayscale-image" src="https://avatars.mds.yandex.net/get-pdb/2001933/86554d64-6d18-4c6a-b2c8-2587c956774a/orig" />
Код CSS:
/*
* у изображения с данным стилем цвет черно-белый
*/
.grayscale-image
{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/*
* при наведении курсора мыши применяем к изображению фильтр через css свойство filter
*/
.grayscale-image:hover
{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
Таким образом, данный стиль можно применять не только к изображениям в блоке наши клиенты, но и к блоку поделиться там, где иконки социальных сетей. Обратите внимание, что в стилях мы указываем css свойства с вендорными префиксами, чтобы эффект одинаково работал в различных браузерах.
-
Создано 26.11.2019 13:49:29
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.