Hiệu ứng Overlay image Hover Effects bằng CSS3
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ệ
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 Effects</h2> <p style="text-align:center">Hover chuột vào hình để thấy hiệu ứng</p> <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 World</div> </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 CSS3</a></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 World</div> </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.
Chúc các bạn thành công.
Đánh giá
Bài viết liên quan
Danh mục bài viết
Có thể bạn cần đọc?
Vương IT là freelancer nhận các dự án lập trình, thiết kế website tại Quận 12 TPHCM. Nhận thiết kế web hcm giá rẻ và các dự án phần mềm theo yêu cầu. Vương là một freelancer thiết kế web đã có hơn 7+ kinh nghiệm thiết kế và lập trình web cho hơn 200+ dự án lớn nhỏ. Hy vọng Vương sẽ được hợp tác cùng mọi người trong thời gian sớm nhất nhé! Add zalo của Vương nha zalo.me/0352833656
Copyright © 2015 - 2024. Designed by Vuong Tran 