ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация блика на изображение в CSS3

Анимация блика на изображение в CSS3

Красивый эффект блика на картинке или изображение HTML воспринимается красивой анимации, это при наведении клика все производится на чистом CSS. Но главным считаю в этом трюке, так это клик, который иди по снимку, ведь сам кадр может стоять на светлом или темном фоне. Где безусловно если рассматривать темную гамму, то там он совершенно по другому смотрится. Но здесь нужна только основа, которая заключается в изображение, что наводит курсор и получает красивый эффект.

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

Как пример наведении клика:

После того, как убрали клик, где снимок приобретает оттенок цвета:

Накладываем блики на изображения при наведение

Установка:

После как блик пройдет по всей картинке, то она автоматически становится в темно синей палитре, это сделано для того, что вы реально навели на то изображение и хотите перейти на материал, что здесь по цветовой гамме сами решаете, какой оттенок оставлять или вообще нужен ли он в этой анимации.

HTML

Код

<figure class="animatsiya_bleska">
  <img src="http://zornet.ru/Images/izobrazheniye/zornet_ru_75.jpg" alt="Ключевые слова" />
  <figcaption>
  <h3>ZorNet.Ru</h3>
  </figcaption>
  <a href="http://zornet.ru"></a>
</figure>

CSS

Код

.animatsiya_bleska {
  background-color: #045e78;
  color: #ffffff;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
}

.animatsiya_bleska * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.animatsiya_bleska:after {
  background-color: white;
  opacity: 0.6;
  top: 0;
  bottom: 0;
  content: '';
  left: -100%;
  position: absolute;
  width: 200px;
  box-shadow: 0 0 100px white;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

.animatsiya_bleska img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.animatsiya_bleska figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  line-height: 1em;
  opacity: 0;
}

.animatsiya_bleska h3 {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.1em;
  margin: 0;
  text-transform: uppercase;
}

.animatsiya_bleska h3 span {
  font-weight: 700;
}

.animatsiya_bleska a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.animatsiya_bleska:hover > img,
.animatsiya_bleska.hover > img {
  opacity: 0.4;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.animatsiya_bleska:hover:after,
.animatsiya_bleska.hover:after {
  left: 200%;
}

.animatsiya_bleska:hover figcaption,
.animatsiya_bleska.hover figcaption {
  opacity: 1;
}

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

Демонстрация

16 Мая 2020 Загрузок: 3 Просмотров: 1361 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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