Css эффект вспышки (flash)

Здравствуйте, давайте создадим эффект вспышки при наведении на изображение при помощи css3.

Скачать исходники для статьи можно ниже

Html код:

<img class="flash" src="http://mnogoblog.ru/wp-content/uploads/2018/06/fox.jpg" />
<br/>
<img class="flash" src="http://mnogoblog.ru/wp-content/uploads/2018/06/cat.jpg" />

Css код:

.flash:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
  0% {  opacity: .3;  }
  100% { opacity: 1; }
}
@keyframes flash {
  0% { opacity: .3; }
  100% { opacity: 1;  }
}

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *