ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект увеличение изображения при наведении

Эффект увеличение изображения при наведении

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

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

HTML

Код
<div class="zornet_ru_detun">  
  <div class="klanraten">
  <a href="http://zornet.ru/" target="blank">
  <img src="http://zornet.ru/Aben/ABGEA/Rin/xLHf7rt2Q52yA7cv02ORpQ.png"/>
  </a>
  </div>
</div>

Здесь ознакомимся о том, как мы можем добавить в Image hover с помощью CSS.

CSS

Код
.zornet_ru_detun {
  float: left;
  position: relative;
  width: 593px;
  height: 317px;
  margin: 0 auto;
  overflow: hidden;
}

.klanraten {
  position: absolute;
  top: 0;
  left: 0;
}

.klanraten img {
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.zornet_ru_detun:hover .klanraten img {
  -webkit-transform: scale(1.09);
  transform: scale(1.09);
}

Для родительского класса контейнера zornet_ru_detun мы будем определять размер, который хотим сохранить при отображении и увеличение внутри него. Обычно это будет такое же, как изображение идет по умолчанию. Также определяем overflow: hidden этот родительский контейнер, что имеет решающее значение, если вы хотите обрезать изображение до его первоначальной высоты и ширины при применении эффекта.

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

Демонстрация:
21 Декабря 2017 Просмотров: 1357 Комментариев: (0)

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

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

Оставь свой отзыв

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