Hướng dẫn overlay css - lớp phủ css
|
Image Hover Overlay có thể hiểu sang tiếng việt là hình ảnh được che phủ khi hover, đúng với các tên của nó, Image Hover Overlay là các hình ảnh mà khi hover chuột lên nó, hình ảnh sẽ được che phủ bởi một đoạn text, một button hay một liên kết nào đó.  Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một số Image Hover Overlay với các hiệu ứng khác nhau. 1. Xây dựng giao diệnĐầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file Code
Trong ứng dụng này chúng ta sẽ có hai thành phần chính đó là phần hình ảnh và phần thẻ div, cái sẽ được hiện hiện đè lên hình ảnh khi hình ảnh được hover. Bài viết này được đăng tại [free tuts .net] OK giờ chuyển qua bước tiếp theo. 2. Thêm CSS cho giao diệnChúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style: .main {
width: 500px;
text-align: center;
margin: auto;
}
.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: #888888;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}Đầu tiên, mình sẽ đặt thuộc tính Tiếp đến khi hình ảnh được hover, mình đặt lại Chúng ta cũng có thể sử dụng đoạn mã CSS sau để thay thế cho đoạn CSS trên nếu bạn muốn một hiệu ứng khác khi hover vào hình ảnh: .main {
width: 500px;
text-align: center;
margin: auto;
}
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #888888;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}Khác với ở trên, lần này mình không sử dụng thuộc tính opacity nữa mà mình sẽ lợi dụng thuộc tính height và transition:
Dựa vào các thuộc tính của CSS, các bạn có thể tùy biến rất nhiều hiệu ứng, ở đây mình không thể trình bày hết được, giờ các bạn chạy file 3. Lời kếtNhư vậy, qua bài viết này mình đã cùng các bạn tạo một Image Hover Overlay với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website, nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại trong các bài viết tiếp theo trên freetuts.net. Tham khảo: w3schools.com Web7b.com giới thiệu tới bạn đọc cách làm hiệu ứng Hover chuột vào hình ảnh hiện lớp Overlay bằng CSS3 khá mượt mà, thích hợp cho các website sử dụng Gallery image tạo hiệu ứng bắt mắt một chút. Các thủ thuật hay khác:
Click xem live demo Cách làm vô cùng đơn giản, chỉ cần copy các đoạn code dưới đây và dán vào Project của các bạn: Đây là code HTML hoàn chỉnh: <html lang="vi-VN"> <head> <meta charset="utf-8"> <style> .container { position: relative; width: 300px; margin:auto; text-align:center; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 100%; left: 0; right: 0; background-color: #008CBA; overflow: hidden; width: 100%; height:0; transition: .5s ease; } .container:hover .overlay { bottom: 0; height: 100%; } .text { white-space: nowrap; color: white; font-size: 20px; position: absolute; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } style> head> <body> <h2 style="text-align:center">Demo hiệu ứng Hover image Effectsh2> <p style="text-align:center">Hover chuột vào hình để thấy hiệu ứngp> <div class="container"> <img src="http://web7b.com/files/assets/demo/img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello Worlddiv> div> div> <p style="text-align:center">Trở về bài viết: <a href="https://web7b.com/hieu-ung-image-hover-effects-bang-css3-bid84.html">Hiệu ứng image Hover Effects bằng CSS3a>p> body> html> Giải thích từng dòng: .container {
position: relative;
width: 300px;
margin:auto;
text-align:center;
}
.image {
display: block;
width: 100%;
height: auto;
}Đoạn trên dùng để quy định kích thước hiển thị cho Block hình. .overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}Đoạn trên xử lý hiệu ứng khi hover chuột và hình ảnh. <div class="container"> <img src="http://web7b.com/files/assets/demo/img_avatar.png" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello Worlddiv> div> div> Đoạn trên là code HTML dùng để hiển thị hình ảnh và hiệu ứng lên trang người dùng. Ban đầu class overlay sẽ có thuộc tính height:0 nên không được hiển thị ra ngoài. Khi người dùng hover chuột vào hình thì CSS sẽ bắt sự kiện hover và gán cho class overlay có thuộc tính height:100% với hiệu ứng CSS3. Mình nghĩ thủ thuật trên cũng khá đơn giản, nếu các bạn tinh ý một chút thì có thể áp dụng dễ dàng cho website của mình.thủ thuật trên cũng khá đơn giản, nếu các bạn tinh ý một chút thì có thể áp dụng dễ dàng cho website của mình. Chúc các bạn thành công. Đánh giá |
