ZorNet.Ru — сайт для вебмастера » HTML и CSS » Изменение размера изображения на CSS

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

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

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

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

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

HTML

Код

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 для этих классов-оболочек, а также для изображения, где задается скорость, что по умолчанию идет в плавном режиме.

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

31 Октября 2019 Загрузок: 1 Просмотров: 875 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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