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

Блики для изображения на HTML + CSS

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

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

Где к цветному изображению подключаем, где так смотрится:

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

HTML

Код

CSS

Код

.blik-snimka {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.blik-snimka img {
  width: 200px;
  height: 280px;
  object-fit: cover;
  filter: grayscale(100%) contrast(120%);
  box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;
}

.blik-snimka:hover img {
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.blik-snimka .bleski-kobusenu {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
}

.blik-snimka .snimok {
  display: block;
  position: absolute;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, .2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.blik-snimka:hover .snimok {
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.blik-snimka:hover img,
.blik-snimka:hover .bleski-kobusenu {
  margin-top: 0;
}

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

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

22 Сентября 2019 Загрузок: 1 Просмотров: 1876 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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