CÁCH LÀM - Tiêu đề Lớp phủ Hình ảnh
Tìm hiểu cách tạo tiêu đề lớp phủ hình ảnh khi di chuột.
Tiêu đề lớp phủ hình ảnh
Di chuột qua hình ảnh để xem hiệu ứng lớp phủ.
Cách tạo tiêu đề hình ảnh lớp phủ
Bước 1) Thêm HTML:
Thí dụ
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
* {box-sizing: border-box}
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/*
The overlay effect - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0,
0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* When you mouse over the container, fade
in the overlay title */
.container:hover .overlay {
opacity: 1;
}
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 .
Go to our CSS Images Tutorial to learn more about how to style images.