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

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

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

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

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

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

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

Hover-эффект при наведении на изображение

Приступаем к установке:

HTML

Код

CSS

Код

.bedsamop-vesamkegum * {
  box-sizing: border-box;
}
.bedsamop-vesamkegum {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: #191818;
  line-height: 0;
}
.bedsamop-vesamkegum img {
  transition: all 0.7s ease 0s;
}
.bedsamop-vesamkegum:hover > img {
  transform: scale(1.6, 1.6) rotate(-20deg);
  opacity: 0.7;
}
.bedsamop-vesamkegum a {
  display: block;
  position: absolute;
  top: 48%;
  left: 48%;
  margin-top: -48px;
  margin-left: -48px;
  width: 98px;
  height: 98px;
  border-radius: 100%;
  text-align: center;
  transition: all 0.7s ease 0s;
  border: 3px solid #c4e0f7;
  background: #3373ab;
  opacity: 0.7;
  transform: scale(0);
  padding: 20px;
}
.bedsamop-vesamkegum a img {
  width: 49px;
}
.bedsamop-vesamkegum a i {
  font-size: 49px;
  color: #f7f7f7;
}
.bedsamop-vesamkegum a:hover {
  opacity: 1;
}
.bedsamop-vesamkegum:hover a {
  transform: scale(1);
}

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

Демонстрация
Источник: atuin.ru

10 Декабря 2018 Просмотров: 1401 Комментариев: (0)

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

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

Kosten

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