Увеличение изображения является функциональным и ценным эффектом. Эта функциональность может быть реализована различными способами, в том числе через чистый 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>
Это решение увеличивает изображение внутри контейнера с эффектом перехода. Помните, что вы можете изменить значение масштабирования и продолжительность перехода в соответствии с вашими потребностями.
Вы можете проверить на демо-странице, чтобы увидеть код в действии.
