Box hover scale image

Trở về

  • 1 007

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

  • Internet Explorer10
  • Firefox4
  • Opera10.5
  • Google Chrome4
  • Safari5.1

Hệ điều hành Smartphone – Tablets

  • IOS3.2
  • Android2.1
  • Window phone8

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="http://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Download file để thực hành

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="http://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt="">
</div>
</body>
</html>

Hiển thị trình duyệt:

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *