Box hover scale image
Dùng CSS3 để tạo hiệu ứng khi hover, trước đây muốn thay đổi trạng thái một thành phần, ta dùng những kỹ thuật phức tạp hoặc phải có sự can thiệp của javascript, giờ đây CSS3 có thể thực hiện được dễ dàng.
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 – zoom out
- Kỹ thuật được dùng ở đây là xử lý transform scale cho image khi hover, kết hợp với transition để có hiệu ứng mượt mà 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-zoom-out {
border: 1px solid #CCC;
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 200px;
}
.box-zoom-out img {
max-width: 100%;
transition: all 1s;
-webkit-transform: scale(1);
transform: scale(1);
}
.box-zoom-out:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box-zoom-out">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>
Hiển thị trình duyệt:
Box hover – zoom và transfer
- Vẫn là kỹ thuật xử lý bằng transform scale cho image khi hover, tuy nhiên chúng ta kết hợp thêm rotate cho chuyển động xoay 3D.
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-zoom-transfer {
height: auto;
margin: 10px auto;
overflow: hidden;
position: relative;
width: 200px;
}
.box-zoom-transfer img {
max-width: 100%;
transition: all 1s;
-webkit-transform: scale(1);
transform: scale(1);
}
.box-zoom-transfer:hover img {
transform: scale(1.3) perspective(120px) rotate(-10deg);
-webkit-transform: scale(1.3) perspective(120px) rotate(-10deg);
}
</style>
</head>
<body>
<div class="box-zoom-transfer">
<img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>