» »

Увеличение картинки при наведении CSS

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

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

Первый вариант:

Как увеличить картинку при наведении - HTML, CSS

Установка:

HTML

Код
<img src="http://zornet.ru/_fr/79/s6865174.jpg" class="uvelichiva">

CSS

Код
.uvelichiva{
  display:inline-block;
  margin-left:10px;
  margin-top:10px;
  opacity: 1;
  -webkit-transform: scale(1,1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 550ms;
  -moz-transform: scale(1,1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 550ms;
  transform: scale(1,1);
  transition-timing-function: ease-out;
  transition-duration: 550ms;
  transform: scale(1,1);
  transition-timing-function: ease-out;
  transition-duration: 550ms;
}
.uvelichiva:hover {
  transform: scale(1.2,1.2);
  transition-timing-function: ease-out;
  transition-duration: 550ms;
  transform: scale(1.2,1.2);
  transition-timing-function: ease-out;
  transition-duration: 550ms;
  -webkit-transform: scale(1.2,1.2);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 550ms;
  -moz-transform: scale(1.2,1.2);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 550ms;
}

Этот вариант из описание, где увеличение происходит не в блоке, а на странице.

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

Второй вариант:

Создать увеличение картинки на чистом CSS

Установка:

HTML

Код
<div class="uvelsivatsud"><img src="http://zornet.ru/_fr/79/s6787665.jpg" alt="ZorNet.Ru — сайт для вебмастера" class="uvelsivatsud"></div>

CSS

Код
.uvelsivatsud {
  display: inline-block; /* Строчно-блочный элемент */
  overflow: hidden; /* Скрываем всё за контуром */
  }
  .uvelsivatsud img {
  transition: 1s; /* Время эффекта */
  display: block; /* Убираем небольшой отступ снизу */
  }
  .uvelsivatsud img:hover {
  transform: scale(1.2); /* Увеличиваем масштаб */
  }

Этот вариант идет на увеличение картинки в основе блока, где веб мастер задает в стилистике скорость.

Демонстрация
2019-10-21 Загрузок: 1 Просмотров: 417 Комментарий: (4)

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

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

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

Комментарий: 4
Kosten
Kosten 2019-10-21 20:531
0
По второму варианту также можно сделать аналогичный эффект схожим образом, но здесь кому как понравится эффект.

Код
<img src="Ссылка на изображение" alt="" class="uvelicheniye-kartinki">


CSS

Код
.uvelicheniye-kartinki {
  transition: 1s; /* Время эффекта */
  }
  .uvelicheniye-kartinki {
  transform: scale(1.2); /* Увеличиваем масштаб */
  }


Демонстрация
iano1
iano1 2019-10-21 23:222
-2
Это другое скрипт
-SAM-
-SAM- 2019-10-22 00:083
0
Вот только не надо тут опять спамить своим сайтом.
http://zornet.ru/forum/93-1620-1 = http://zornet.ru/forum/123-2552-1 (к данному материалу не имеет отношения).

UPD.:
P.S.: кстати, этот материал не писал же он, правильно? Всё вами было за него переписано - лучше на свой акк перевести эти материалы (ведь iano не автор этих решений, а публикации до ума вами доводились).
Kosten
Kosten 2019-10-22 10:174
0
Вы очень замечательный человек, с лету все заметили. На этом все, так как вам бан, ведь не может эта композиция длиться вечно.
avatar