Box hover 2 image

Trở về

  • 1 337

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

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

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

  • IOS3.2
  • Android2.1
  • Window phone8

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

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

 

Download file để thực hành

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

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

 

Có một bình luận cho “Box hover 2 image”

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 *