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 index.html
và dán đoạn mã sau vào trong thẻ body:
Code
Freetuts.net hướng dẫn tạo Image Hover Overlay
Hover lên ảnh để xem hiệu ứng
Freetuts.net
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ện
Chú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 opacity: 0;
cho phần thẻ div, thuộc tính này sẽ khiến nó trở nên trong suốt và do đó hình ảnh sẽ được hiển thị.
Tiếp đến khi hình ảnh được hover, mình đặt lại opacity: 1;
cho phần thẻ div này và nó sẽ được hiển thị đè lên phàn hình ảnh.
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:
- Mặc định, mình sẽ đặt height của phần thẻ div là 0 để ẩn nó đi.
- Khi hình ảnh được hover, mình đặt lại
.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%]; }
0 cho nó, do đã được thiết lập thuộc tính transition nên phần thẻ div sẽ có hiệu ứng chuyển động.
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 index.html
để xem thành quả mình vừa tạo ra nhé!
3. Lời kết
Như 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:
- Tạo Single page với hiệu ứng chuyển trang bằng CSS3
- Hướng dẫn Resize ảnh CSS không làm ảnh hưởng tỷ lệ
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:
.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%];
}
Demo hiệu ứng Hover image Effects
Hover chuột vào hình để thấy hiệu ứng
Hello World
Trở về bài viết: Hiệu ứng image Hover Effects bằng CSS3
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.
Hello World
Đ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á