» »

Черно белый hover-эффект при наведение на CSS

Черно белый hover-эффект при наведение на CSS

Есть много различных методов, как можно изменить оттенок изображение, при наведение курсора, но здесь идет серый в простой установке. В этой статье рассмотрим различные виды эффектов наведения изображения с использованием фильтров CSS. Это будет оттенок серого или сено белого, что при наведении быстро происходит. Этот метод масштабирования CSS3 подойдет на различные функций, где будет присутствовать снимки.

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

Быстрые способы превратить красочное изображение в черно-белый с помощью CSS без использования JavaScript.

HTML

Код
<div>
  <img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/OHH_0snVQHujEhdtBcg1cw.png" />
</div>

Вот фрагмент кода CSS, который поможет вам преобразовать изображение в черный и белый с помощью мыши.

CSS

Код
img {
  transition: filter .7s ease-in-out;
  -webkit-filter: grayscale(0%);  
  filter: grayscale(0%);  
}

img:hover {
  -webkit-filter: grayscale(99%);  
  filter: grayscale(99%);  
}

В этой демонстрации достигаются с помощью методов CSS фильтра и метода масштабирования CSS3 для преобразования свойства.

PS - если вам нужно сделать курсор, то в стили добавляем style="cursor:pointer;" и после этого появится, а по умолчанию стрелка идет.
2018-01-13 Просмотров: 666 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
wwwmego22
wwwmego22 2018-04-26 23:011
0
А как сделать наоборот чтобы при наведении чветно было
Kosten
Kosten 2018-04-26 23:442
0
Не понятно, чтоб по умолчанию черно белый снимок был, а вот когда наводишь, чтоб цветной становился.
-SAM-
-SAM- 2018-04-28 00:273
0
За стили при наведение отвечает псевдокласс :hover, ну а ответ: 0% и 99% поменять в коде нужно местами.
Вот еще подборка фильтров-эффектов, что можно использовать.
Kosten
Kosten 2018-04-28 01:394
0
Подборка фильтров хорошая, на вид материалов применял, хотя можно на каждом изображение сделать.
avatar