» »

Черно белый 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;" и после этого появится, а по умолчанию стрелка идет.
13.01.2018 Просмотров: 248 Комментарий: (0)

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

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

Комментарий: 0
avatar