CÁCH LÀM - Biểu tượng Lớp phủ Hình ảnh
Tìm hiểu cách tạo hiệu ứng biểu tượng lớp phủ hình ảnh khi di chuột.
Biểu tượng Lớp phủ Hình ảnh
Di chuột qua hình ảnh để xem hiệu ứng lớp phủ.
Cách tạo biểu tượng hình ảnh lớp phủ
Bước 1) Thêm HTML:
Thí dụ
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<a href="#"
class="icon" title="User Profile">
<i
class="fa fa-user"></i>
</a>
</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
100%;
max-width: 400px;
}
/* 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;
top:
0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
/* When you mouse over the container, fade
in the overlay icon*/
.container:hover .overlay {
opacity: 1;
}
/*
The icon inside the overlay is positioned in
the middle vertically and horizontally */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:
translate(-50%, -50%);
text-align: center;
}
/* When you
move the mouse over the icon, change color */
.fa-user:hover {
color: #eee;
}
Mẹo: Đồng thời xem các hiệu ứng lớp phủ hình ảnh khác (mờ dần, 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 .
Đi tới 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.