Как сделать - эффект масштабирования наложения изображения при наведении
Узнайте, как создать эффект масштабирования наложения изображения при наведении указателя мыши.
Изображение наведите полноэкранный зум
Наведите курсор на изображение, чтобы увидеть эффект масштабирования.
Как создать эффект увеличения наложения
Шаг 1) добавить HTML:
Пример
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<div
class="text">Hello World</div>
</div>
</div>
Шаг 2) добавить CSS:
Пример
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
}
/* Make the image to responsive */
.image {
width: 100%;
height: auto;
}
/*
The overlay effect (full height and width) - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right:
0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform:scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the
overlay text will "zoom" in display */
.container:hover .overlay {
transform:
scale(1)
}
/* Some text inside the overlay, which is positioned in
the middle vertically and horizontally */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:
translate(-50%, -50%);
text-align: center;
}
Совет: Также увидеть другие эффекты наложения изображения (Fade, слайд, и т.д.) в нашем как-образ наведении наложения.
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.