Cách thực hiện - Thu phóng lớp phủ hình ảnh
Tìm hiểu cách tạo hiệu ứng thu phóng lớp phủ hình ảnh khi di chuột.
Di chuột qua hình ảnh Thu phóng toàn màn hình
Di chuột qua hình ảnh để xem hiệu ứng thu phóng.
Cách tạo hiệu ứng thu phóng lớp phủ
Bước 1) Thêm HTML:
Ví dụ
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<div
class="text">Hello World</div>
</div>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* 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%;
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%);
text-align: center;
}
Hãy tự mình thử »Mẹo: Ngoài ra, hãy xem các hiệu ứng lớp phủ hình ảnh khác (làm mờ, trượt, v.v.) trong Cách thực hiện - Lớp phủ di chuột hình ảnh của chúng tôi.
Hãy xem Hướng dẫn về hình ảnh CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho hình ảnh.