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

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

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

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

HTML

Код

Здесь ознакомимся о том, как мы можем добавить в 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 Просмотров: 1437 Комментариев: (0)

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

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

Kosten

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