» »

Изменение размера изображения на CSS

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

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

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

Установочный процесс:

HTML

Код
<div class="pomusedam">
<div class="masutabil-dovanika">
  <div class="naveden-kasedun">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/lions.jpg"/>
</div>
</div>

CSS

Код
.pomusedam {
  width: 1280px;
  margin: 0 auto;
}

.masutabil-dovanika {
  float: left;
  position: relative;
  width: 640px;
  height: 360px;
  margin: 0 auto;
  overflow: hidden;
}

.naveden-kasedun {
  position: absolute;
  top: 0;
  left: 0;
   
}

.naveden-kasedun img {
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.masutabil-dovanika:hover .naveden-kasedun img {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

Как мы видим, я обернул изображения, к которым я хочу применить эффект масштабирования, в классы-обертки под названием masutabil-dovanika и naveden-kasedun. Далее мы определим стили CSS для этих классов-оболочек, а также для изображения, где задается скорость, что по умолчанию идет в плавном режиме.

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

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

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

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

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