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

Hover-эффект блеска для изображений

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

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

Установка:

HTML

Код

CSS

Код

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

.kraskami 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: 0px;
}

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

.kraskami .kamu-vopisuda{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
}

.kraskami .maskan{
  display: block;
  position:absolute;
  width: 38%;
  height: 195%;
  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);
}

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

.kraskami:hover img,
.kraskami:hover .kamu-vopisuda{
  margin-top: 0;
}

#author{
  font-family: Helvetica, Arial;
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  color: #7b7979;
}

#author:hover{
  color: #0c0c0c;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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