Box hover 2 image
Hover 2 image thay đổi nhau sẽ xử lý không dễ cho một số bạn chưa quen sử dụng javascript, tuy nhiên với vài thao tác đơn giản với CSS3 chúng ta hoàn toàn có thể làm chủ những hiệu ứng này.
Trình duyệt – hệ điều hành hỗ trợ
Yêu cầu phiên bản với mức tối thiểu được hỗ trợ:
Trình duyệt
10
4
10.5
4
5.1
Hệ điều hành Smartphone – Tablets
3.2
2.1
8
box hover – box fade
- Kỹ thuật sử dụng khá đơn giản, giảm opacity cho image, khi image ở trên chuyển dần opacity xuống zero thì sẽ hiển thị image bên dưới.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
margin: 10px auto;
border: 1px solid #CCC;
height: auto;
overflow: hidden;
position: relative;
width: 200px;
}
.box-hover img {
max-width: 100%;
transition: all 1s;
}
.box-hover .img-change {
position: absolute;
top: 0;
right: 0;
opacity: 1;
}
.box-hover:hover .img-change {
opacity: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product02.jpg" alt="" class="img-change">
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – box move right
- Kỹ thuật sử dụng chỉ là việc thay đổi vị trí right và giảm opacity cho image, khi image ở trên chuyển động thì sẽ hiển thị image bên dưới.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
margin: 10px auto;
border: 1px solid #CCC;
height: auto;
width: 200px;
overflow: hidden;
position: relative;
}
.box-hover img {
max-width: 100%;
transition: all 1s;
}
.box-hover .img-change {
position: absolute;
top: 0;
right: 0;
opacity: 1;
}
.box-hover:hover .img-change {
right: -100%;
opacity: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product02.jpg" alt="" class="img-change">
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – box move right
- Kỹ thuật tương tự như trên, nhưng thay vì slide từ bên trái ta sẽ sử dụng position top để điều khiển hướng chuyển động của image.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
margin: 10px auto;
border: 1px solid #CCC;
height: auto;
width: 200px;
overflow: hidden;
position: relative;
}
.box-hover img {
max-width: 100%;
transition: all 1s;
}
.box-hover .img-change {
position: absolute;
top: 0;
right: 0;
opacity: 1;
}
.box-hover:hover .img-change {
top: -100%;
opacity: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product02.jpg" alt="" class="img-change">
</div>
</body>
</html>
Hiển thị trình duyệt:
box hover – box move right
- Kỹ thuật thuật này áp dụng giống như hover fade bên trên, tức là ngoài việc giảm opacity ta còn kết hợp với transfrom scale để có hiệu ứng đẹp mắt hơn.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
img { vertical-align:middle; }
.box-hover {
margin: 10px auto;
border: 1px solid #CCC;
height: auto;
width: 200px;
overflow: hidden;
position: relative;
}
.box-hover img {
max-width: 100%;
transition: all 1s;
}
.box-hover .img-change {
position: absolute;
top: 0;
right: 0;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.box-hover:hover .img-change {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
</style>
</head>
<body>
<div class="box-hover">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product02.jpg" alt="" class="img-change">
</div>
</body>
</html>
HAY QUÁ XIN CÁM ƠN TÁC GIẢ BÀI VIẾT NHIỀU
Tác Giả cho em hỏi là tại sao hover vào class=”img-change” . mà lại set thuộc tính transition cho class img vậy. Theo em hiểu là phải set transition cho class img-change chứ. cảm ơn tác giả, mong được reply ạ
Xin chào bạn.
Cách sử dụng transition cho “img-change” là phù hợp nhe bạn.
Cách dùng cho “.box-hover img” sẽ tác động tới toàn bộ img có bên trong “box-hover”, sẽ tiện hơn nếu hình bên dưới cũng có sử dụng transition.
Thân.