Box hover fade

Trở về

  • 4,807

Opacity trong CSS3 là thuộc tính đơn giản nhưng khá hiệu quả trong việc xử lý hover transparent, kết hợp với transition sẽ cho nhiều hiệu ứng đẹp mắt tưởng như rất khó thực hiện.

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 – fade scale

  • Kỹ thuật được sử dụng là transform scale cho image bên dưới, kết hợp với nó là opacity cho cả các thành phần bên trên và 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 {
    border: 1px solid #CCC;
    height: auto;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
    width: 200px;
}
.box-hover a:before {
    background-color: rgba(255,255,255,0.8);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
.box-hover img {
    max-width: 100%;
    transform:scale(1);
    transition: all 0.5s;
}
.box-hover h3,
.box-hover p {
    position: absolute;
    left: 0;
    opacity: 0;
    width: 100%;
    text-align: center;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
    z-index: 3;
}
.box-hover h3 {
    top: 30%;
}
.box-hover p {
    bottom: 40%;
}
.box-hover:hover a:before {
    opacity: 1;
}
.box-hover:hover img {
    transform:scale(1.1);
}
.box-hover:hover h3 {
    opacity: 1;
}
.box-hover:hover p {
    opacity: 1;
}
</style>
</head>
<body>
<div class="box-hover">
    <a href="#"><img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt=""></a>
    <h3>item 1</h3>
    <p>item 2</p>
</div>
</body>
</html>

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

 

box hover – fade icon

  • Kỹ thuật được sử dụng là cách dùng :before và after trong CSS, sử dụng 2 bộ chọn này để add thêm 2 thành phần chuyển động là background-image và background-color nền, kết hợp với nó là cách dùng tranform và transition.

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-view {
    border: 1px solid #CCC;
    height: auto;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
    width: 200px;
}
.box-view a:before {
    background:url("https://hocwebchuan.com/images/chuyende/ico_plus.png") no-repeat center center;
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    z-index:3;
    width:113px;
    height:113px;
    margin-left:-56px;
    margin-top:-56px;
    opacity:0;
    -webkit-transition:all 0.4s;
       -moz-transition:all 0.4s;
         -o-transition:all 0.4s;
            transition:all 0.4s;
    -webkit-transform:scale(0.1);
            transform:scale(0.1);
}
.box-view a:after {
    background-color: rgba(0,0,0,0.3);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    -webkit-transition:all 0.4s;
       -moz-transition:all 0.4s;
         -o-transition:all 0.4s;
            transition:all 0.4s;
    -webkit-transform: scale(0);
            transform: scale(0);
}
.box-view img {
    max-width: 100%;
    transition: all 1s;
    -webkit-transform: scale(1);
            transform: scale(1);
}
.box-view a:hover:after {
    opacity:0.2;
    -webkit-transform:scale(1);
            transform:scale(1);
}
.box-view a:hover:before {
    opacity:1;
    -webkit-transform:scale(1);
            transform:scale(1);
}
.box-view a:hover img {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box-view">
    <a href="#"><img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt=""></a>
</div>
</body>
</html>

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

 

box hover – fade move background

  • Không khác gì cách dùng bên trên, lần này chúng ta sử dụng 2 background nền, cho di chuyển từ 2 góc trên và 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-view {
    border: 1px solid #CCC;
    height: auto;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
    width: 200px;
}
.box-view a:before,
.box-view a:after {
    background-color: #FFF;
    content:"";
    height: 296px;
    width: 200px;
    position:absolute;
    z-index:3;
    opacity:0;
    -webkit-transition:all 0.6s;
       -moz-transition:all 0.6s;
         -o-transition:all 0.6s;
            transition:all 0.6s;
}
.box-view a:before {
    top:-200%;
    left:-200%;
}
.box-view a:after {
    right:-200%;
    bottom:-200%;
}
.box-view img {
    max-width: 100%;
}
.box-view a:hover:before {
    opacity:0.2;
    top:0;
    left:0;
}
.box-view a:hover:after {
    opacity:0.2;
    bottom: 0;
    right: 0;
}
</style>
</head>
<body>
<div class="box-view">
    <a href="#"><img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt=""></a>
</div>
</body>
</html>

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

 

box hover – tổng hợp

  • Kỹ thuật áp dụng sau đây đơn giản nhưng khá là đẹp mắt, kết hợp chuyển động position và thêm background-color opacity bên trên, kết hợp với điều chỉnh vị trí cho các thành phần khác.

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-view {
    border: 1px solid #CCC;
    height: auto;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
    width: 200px;
}
.box-view a:after {
    background-color: rgba(243,246,36,0.7);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
}
.box-view img {
    max-width: 110%;
    transition: all 0.3s;
    position: relative;
    left: -10%;
}
.box-view h3,
.box-view p {
    color: #FFF;
    position: absolute;
    right: 10px;
    width: 100%;
    text-align: right;
    z-index: 4;
    transition: all 0.5s;
}
.box-view h3 {
    bottom: 5%;
}
.box-view p {
    bottom: -20%;
}
.box-view a:hover:after {
    opacity:1;
}
.box-view:hover img {
    left: 0;
}
.box-view:hover h3 {
    color: #000;
    bottom: 10%;
}
.box-view:hover p {
    color: #000;
    bottom: 5%;
}
</style>
</head>
<body>
<div class="box-view">
    <a href="#"><img src="https://hocwebchuan.com/images/chuyende/bnr_product01.jpg" alt=""></a>
    <div class="inner">
        <h3>item 1</h3>
        <p>item 2</p>
    </div>
</div>
</body>
</html>

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.