• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Увеличение изображения в контейнере на CSS (Увеличить изображения внутри контейнера при наведении мыши)
Увеличение изображения в контейнере на CSS
Kosten
Дата: Понедельник, 2020-02-03, 21:26 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25966
Награды: 59


Увеличение изображения является функциональным и ценным эффектом. Эта функциональность может быть реализована различными способами, в том числе через чистый CSS, JavaScript или через jQuery. Из этих вариантов, простое решение CSS является самым быстрым, так как другие 2 способа требуют выполнения набора блоков кода, который включает обход DOM и является дорогостоящим процессом. К счастью для нас CSS3, который предоставляет простое и эффективное решение.

Стили CSS3 имеет свойство transform, которое позволяет вам переводить, вращать, масштабировать и наклонять элементы. Это чистое решение CSS увеличит изображение внутри контейнера при наведении мыши.

HTML-разметка

Во-первых, давайте посмотрим на HTML, где содержит изображение, которое заключенное в контейнер и элемент div элемента. Контейнер является родительским элементом, а элемент является дочерним элементом, который содержит изображение. Элемент div элемента требуется для определения абсолютной позиции изображения внутри контейнера.

CSS

Поскольку изображение будет масштабироваться для создания эффекта масштабирования внутри контейнера, CSS-класс .container будет определять размер изображения. В нашем случае размер составляет 480 × 320 пикселей. Также важно определить свойство переполнения как «скрытое», так как оно обрезает изображение до его первоначальной ширины и высоты.

Код
.container {
position: relative;
width: 480px;
height: 320px;
overflow: hidden;
}

CSS-класс .item используется для позиционирования изображения внутри родительского контейнера. Он устанавливает верхнюю и левую позиции изображения внутри контейнера.

Код
.item {
position: absolute;
top: 0;
left: 0;
}

Затем присоедините класс CSS события hover к контейнеру, который использует свойство CSS3 transform для масштабирования изображения до 120%. Одним из значений свойства transform является scale (). Эта функция позволяет масштабировать элемент вверх или вниз, что в свою очередь заставляет элемент казаться больше или меньше.

Код
.container:hover .item img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

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

Код
.item img {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
}

Полный код CSS:

Код
.container {
position: relative;
width: 480px;
height: 320px;
overflow: hidden;
}
.item {
position: absolute;
top: 0;
left: 0;
}
.item img {
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
}
.container:hover .item img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

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

И так:

Код
<div class="container">
  <div class="item">
    <img src="Ссылка на изображение №1" />
  </div>
</div>
<br/>
<div class="container">
  <div class="item">
    <img src="Ссылка на изображение №2" />
  </div>
</div>
<br/>
<div class="container">
  <div class="item">
    <img src="Ссылка на изображение №2" />
  </div>
</div>

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

Вы можете проверить на демо-странице, чтобы увидеть код в действии.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Увеличение изображения в контейнере на CSS (Увеличить изображения внутри контейнера при наведении мыши)
  • Страница 1 из 1
  • 1
Поиск: