Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

CSS - Lớp che phủ: Hướng dẫn cơ bản về việc tạo hiệu ứng web động

Xin chào các siêu sao thiết kế web tương lai! Hôm nay, chúng ta sẽ cùng lặn vào thế giới fascinante của các lớp che phủ CSS. Đừng lo lắng nếu bạn là người mới bắt đầu – tôi nhớ lần đầu tiên mình học về lớp che phủ, và tôi đảm bảo bạn sẽ thấy nó thú vị và bổ ích. Vậy, hãy cùng bắt đầu hành trình này nhé!

CSS - Overlay

Lớp che phủ CSS là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu lớp che phủ là gì. Hãy tưởng tượng bạn đang nhìn một bức tranh đẹp, và bỗng nhiên, ai đó đặt một tờ giấy trong suốt lên trên nó với một số văn bản. Đó chính xác là điều mà lớp che phủ làm trên một trang web – nó thêm một lớp额外 trên nội dung hiện có, thường để cung cấp thông tin bổ sung hoặc tạo hiệu ứng thị giác.

Lớp che phủ CSS - Ví dụ cơ bản

Hãy bắt đầu với một ví dụ lớp che phủ đơn giản. Đây là mã HTML và CSS:

<div class="container">
<img src="cute-puppy.jpg" alt="Một chú chó con">
<div class="overlay">
<div class="text">Xin chào, tôi là một chú chó con!</div>
</div>
</div>
.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Hãy phân tích này:

  1. Chúng ta có một container với một hình ảnh và một div lớp che phủ.
  2. Lớp che phủ được định vị tuyệt đối trong container.
  3. Ban đầu, lớp che phủ có độ mờ 0 (không nhìn thấy).
  4. Khi chúng ta di chuột qua container, độ mờ của lớp che phủ thay đổi thành 1 (thấy rõ).
  5. Văn bản được đặt giữa trong lớp che phủ.

Lớp che phủ CSS - Hiệu ứng trượt từ trên xuống

Bây giờ, hãy làm cho mọi thứ thú vị hơn với một hiệu ứng trượt! Đây là cách chúng ta có thể thay đổi CSS để lớp che phủ trượt từ trên xuống:

.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
bottom: 0;
height: 100%;
}

Trong ví dụ này, lớp che phủ bắt đầu ở trên hình ảnh (bottom: 100%) và không có chiều cao. Khi di chuột, nó trượt xuống để che phủ toàn bộ hình ảnh.

Lớp che phủ CSS - Hiệu ứng trượt từ dưới lên

Nếu chúng ta muốn lớp che phủ trượt lên thay vì xuống? Dễ ợt! Chỉ cần thay đổi một vài dòng:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}

.container:hover .overlay {
height: 100%;
}

Bây giờ, lớp che phủ bắt đầu ở dưới và mở rộng lên khi di chuột.

Lớp che phủ CSS - Hiệu ứng trượt từ trái sang phải

Hãy thay đổi và làm lớp che phủ trượt từ trái sang phải:

.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
right: 0;
}

Ở đây, lớp che phủ bắt đầu không có chiều rộng ở bên trái và mở rộng ra toàn bộ chiều rộng khi di chuột.

Lớp che phủ CSS - Hiệu ứng trượt từ phải sang trái

Và tất nhiên, chúng ta cũng có thể làm nó trượt từ phải sang trái:

.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}

.container:hover .overlay {
width: 100%;
left: 0;
}

Lần này, lớp che phủ bắt đầu ở bên phải và trượt sang trái khi di chuột.

Lớp che phủ CSS - Hiệu ứng mờ dần

Nhớ lại ví dụ đầu tiên của chúng ta? Đó thực sự là một hiệu ứng mờ dần! Nhưng hãy làm cho nó mịn hơn:

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

Điều này tạo ra một hiệu ứng mờ dần mịn màng khi di chuột qua hình ảnh.

Lớp che phủ CSS - Lớp che phủ tiêu đề hình ảnh

Hãy tạo một lớp che phủ hiển thị tiêu đề hình ảnh khi di chuột:

<div class="container">
<img src="cute-puppy.jpg" alt="Một chú chó con" class="image">
<div class="overlay">
<div class="title">Chú chó dễ thương</div>
</div>
</div>
.container {
position: relative;
width: 100%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.container:hover .overlay {
opacity: 1;
}

Điều này tạo ra một lớp che phủ tiêu đề xuất hiện từ dưới lên khi di chuột.

Lớp che phủ CSS - Lớp che phủ biểu tượng

Bây giờ, hãy thêm một lớp che phủ biểu tượng vào hình ảnh:

<div class="container">
<img src="cute-puppy.jpg" alt="Một chú chó con" class="image">
<div class="overlay">
<a href="#" class="icon" title="Hồ sơ người dùng">
<i class="fa fa-user"></i>
</a>
</div>
</div>
.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.container:hover .overlay {
opacity: 1;
}

.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.fa-user:hover {
color: #eee;
}

Điều này tạo ra một lớp che phủ biểu tượng xuất hiện ở giữa hình ảnh khi di chuột.

Lớp che phủ CSS - Các thuộc tính liên quan

Dưới đây là bảng các thuộc tính thường được sử dụng với lớp che phủ CSS:

Thuộc tính Mô tả
position Đặt phương pháp định vị
top, bottom, left, right Xác định vị trí của lớp che phủ
width, height Đặt kích thước của lớp che phủ
opacity Điều khiển độ trong suốt của lớp che phủ
transition Định nghĩa cách lớp che phủ xuất hiện/disappear
background-color Đặt màu nền của lớp che phủ
z-index Điều khiển thứ tự stacking của các yếu tố

Và thế là bạn đã học được cơ bản về lớp che phủ CSS. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngại thử nghiệm với các ví dụ này. Ai biết được? Bạn có thể tạo ra xu hướng lớn tiếp theo trong thiết kế web! Chúc may mắn với mã của bạn, và mong rằng lớp che phủ của bạn luôn mịn màng và các过渡 luôn mượt mà!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Thanh导航
Hướng Dẫn Tiếp Theo:
CSS - biểu mẫu