Chia sẻ với mọi người một số hiệu ứng Hover hữu dụng khi làm web Frontend. Có thể ứng dụng vào làm hiệu ứng Hover cho Avatar của ảnh bài viết, ảnh sản phẩm.

1. Hiệu ứng Hover ZoomIn
                    <div class="col-md-4 hover-zoomin">
                        <a href="#" title="" class="rounded">
                            <img class="" src="image/path" alt="" />
                        </a>
                        <h6 class="text-center mt-2">Hover ZoomIn</h6>
                    </div>
                
                    .hover-zoomin a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                    }
                    .hover-zoomin img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    .hover-zoomin:hover img {
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                        border-radius: .25rem !important
                    }
                
Hằng Nguyễn cúi xuống buộc dây giầy
Hover ZoomIn

2. Hiệu ứng Hover Fade
                    <div class="col-md-4 hover-fade">
                        <a href="#" title="" class="rounded">
                            <img src="image/path" alt="" />
                        </a>
                        <h6 class="text-center">Hover Fade</h6>
                    </div>
                
                    .hover-fade a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                        background-color: #333;
                    }
                    .hover-fade img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    .hover-fade:hover img 
                    {
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
                        filter: alpha(opacity=0.5);
                        opacity: 0.5;
                    }
                
Hằng Nguyễn ở bể bơi
Hover Fade

3. Hiệu ứng Hover Blur
                    <div class="col-md-4 hover-blur">
                        <a href="#" title="" class="rounded">
                            <img src="image/path" alt="" />
                            <h2><span class="text-white">SơnPc 20</span></h2>
                        </a>
                        <h6 class="text-center">Hover Blur</h6>
                    </div>
                
                    .hover-blur a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                    }
                    .hover-blur img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    .hover-blur:hover img 
                    {
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                        -webkit-filter: grayscale(0.6) blur(1px);
                        filter: grayscale(0.6) blur(1px);
                    }
                    .hover-blur a h2 
                    {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        margin-top: 0px;
                        margin-bottom: 0px;
                        height: 100%;
                        width: 100%;
                        padding: 45% 20px;
                        text-align: center;
                        background-color: rgba(0,0,0,0.5);
                        /*background dotted*/
                        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        -webkit-background-size: 3px 3px;
                        -moz-background-size: 3px 3px;
                        background-size: 3px 3px;
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-blur:hover a h2 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                    }
                    .hover-blur .text-white 
                    {
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-blur:hover .text-white 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
                        filter: alpha(opacity=1);
                        opacity: 1;
                    }
                
Hằng Nguyễn

SơnPc 20

Hover Blur

4. Hiệu ứng Hover Mask
                    <div class="col-md-4 hover-mask">
                        <a href="#" title="" class="rounded">
                            <img src="image/path" alt="" />
                            <h2><span class="fa fa-search text-white"></span></h2>
                        </a>
                        <h6 class="text-center">Hover Mask</h6>
                    </div>
                
                    .hover-mask a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                    }
                    .hover-mask img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                    }
                    .hover-mask:hover img 
                    {
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                    }
                    .hover-mask a h2 
                    {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        margin-top: 0px;
                        margin-bottom: 0px;
                        height: 100%;
                        width: 100%;
                        padding: 45% 20px;
                        text-align: center;
                        background-color: rgba(0,0,0,0.4);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-mask:hover a h2 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                    }
                    .hover-mask .fa 
                    {
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        color: #fff;
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-mask:hover .fa 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
                        filter: alpha(opacity=1);
                        opacity: 1;
                    }
                
Hằng Nguyễn

Hover Mask

5. Hiệu ứng Hover Zoomout
                    <div class="col-md-4 hover-zoomout">
                        <a href="" title="" class="rounded">
                            <img src="image/path" alt="" />
                        </a>
                        <h6 class="text-center mt-2">Hover Zoomout</h6>
                    </div>
                
                    .hover-zoomout a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                    }
                    .hover-zoomout img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                    }
                    .hover-zoomout:hover img 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                    }
                
Hằng Ngyễn
Hover Zoomout

6. Hiệu ứng Hover Blurout
                    <div class="col-md-4 hover-blurout">
                        <a href="#" title="" class="rounded">
                            <img src="image/path" alt="" />
                            <h2><span class="glyphicon glyphicon-search"></span></h2>
                        </a>
                        <h6 class="text-center mt-2">Hover Blurout</h6>
                    </div>
                
                    .hover-blurout a 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                    }
                    .hover-blurout img 
                    {
                        width: 100%;
                        height: auto;
                        -webkit-transition: all 0.5s ease-in-out;
                        -moz-transition: all 0.5s ease-in-out;
                        -o-transition: all 0.5s ease-in-out;
                        -ms-transition: all 0.5s ease-in-out;
                        transition: all 0.5s ease-in-out;
                        -webkit-transform: scale(1.2);
                        -moz-transform: scale(1.2);
                        -o-transform: scale(1.2);
                        -ms-transform: scale(1.2);
                        transform: scale(1.2);
                    }
                    .hover-blurout:hover img 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        /*Blur Filtr*/
                        -webkit-filter: grayscale(0.6) blur(1px);
                        -moz-filter: grayscale(0.6) blur(1px);
                        -o-filter: grayscale(0.6) blur(1px);
                        -ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
                        filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2);
                        filter: grayscale(0.6) blur(2px);
                    }
                    .hover-blurout a h2 
                    {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        margin-top: 0px;
                        margin-bottom: 0px;
                        height: 100%;
                        width: 100%;
                        padding: 45% 20px;
                        text-align: center;
                        background-color: rgba(0,0,0,0.4);
                        /*background dotted*/
                        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
                        -webkit-background-size: 3px 3px;
                        -moz-background-size: 3px 3px;
                        background-size: 3px 3px;
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-blurout:hover a h2 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                    }
                    .hover-blurout .glyphicon 
                    {
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        color: #fff;
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .hover-blurout:hover .glyphicon 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
                        filter: alpha(opacity=1);
                        opacity: 1;
                    }
                
Hằng Nguyễn

Hover Blurout

7. Hiệu ứng Hover Overlay Text
                    <div class="overlay-item overlay-effect rounded">
                        <img src="image/path" alt="" />
                        <div class="mask">
                            <h3>SơnPC 20</h3>
                            <p>
                                Chào mừng các bạn tới website của tôi
                            </p>
                            <a href="http://sonpc20.com" class="btn btn-primary">Đọc thêm</a>
                        </div>
                    </div>
                
                    .overlay-item 
                    {
                        display: block;
                        position: relative;
                        overflow: hidden;
                        text-align: center;
                    }
                        .overlay-item .mask 
                        {
                            display: block;
                            position: absolute;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                            height: 100%;
                        }
                        .overlay-item img 
                        {
                            display: block;
                            width: 100%;
                            height: auto;
                            x-margin-right: auto;
                            x-margin-left: auto;
                        }
                        .overlay-item h3 
                        {
                            text-transform: uppercase;
                            text-align: center;
                            position: relative;
                            padding: 10px;
                            margin: 0px 0px 20px 0px;
                            display: block;
                            background-color: #333;
                            color: #fff;
                        }
                        .overlay-item p 
                        {
                            text-align: left;
                        }
                        .overlay-item a.btn 
                        {
                            margin: 10px 0;
                        }
                    .overlay-effect img 
                    {
                        -webkit-transform: scaleY(1);
                        -moz-transform: scaleY(1);
                        -o-transform: scaleY(1);
                        -ms-transform: scaleY(1);
                        transform: scaleY(1);
                        -webkit-transition: all 0.7s ease-in-out;
                        -moz-transition: all 0.7s ease-in-out;
                        -o-transition: all 0.7s ease-in-out;
                        -ms-transition: all 0.7s ease-in-out;
                        transition: all 0.7s ease-in-out;
                    }
                    .overlay-effect .mask 
                    {
                        background-color: rgba(255, 255, 255, 0.3);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .overlay-effect h3 
                    {
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .overlay-effect p 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                    }
                    .overlay-effect a.btn 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                        -webkit-transform: scale(0);
                        -moz-transform: scale(0);
                        -o-transform: scale(0);
                        -ms-transform: scale(0);
                        transform: scale(0);
                        -webkit-transition: all 0.5s linear;
                        -moz-transition: all 0.5s linear;
                        -o-transition: all 0.5s linear;
                        -ms-transition: all 0.5s linear;
                        transition: all 0.5s linear;
                    }
                    .overlay-effect:hover img 
                    {
                        -webkit-transform: scale(10);
                        -moz-transform: scale(10);
                        -o-transform: scale(10);
                        -ms-transform: scale(10);
                        transform: scale(10);
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                    }
                    .overlay-effect:hover .mask 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                    }
                    .overlay-effect:hover h3, .overlay-effect:hover p, .overlay-effect:hover a.btn 
                    {
                        -webkit-transform: scale(1);
                        -moz-transform: scale(1);
                        -o-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                    }
                
Hằng Nguyễn

SơnPC 20

Chào mừng các bạn tới website của tôi

Đọc thêm
Overlay Text

8. Hiệu ứng Hover Fall
                    <div class="fall-item fall-effect rounded">
                        <img src="image/path" />
                        <div class="mask">
                            <h2>SơnPC 20</h2>
                            <p>Chào mừng các bạn tới website của tôi</p>
                            <a href="http://sonpc20.com" class="btn btn-primary">Đọc thêm</a>
                        </div>
                    </div>
                
                    .fall-item 
                    {
                        width: 100%;
                        height: auto;
                        overflow: hidden;
                        position: relative;
                        text-align: center;
                    }
                        .fall-item .mask, .fall-item .content 
                        {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            overflow: hidden;
                            top: 0;
                            left: 0;
                        }
                        .fall-item img 
                        {
                            display: block;
                            position: relative;
                            width: 100%;
                            height: auto;
                        }
                        .fall-item h2 
                        {
                            text-transform: uppercase;
                            color: #fff;
                            text-align: center;
                            position: relative;
                            padding: 10px;
                            background: rgba(0, 0, 0, 0.8);
                            margin: 0 0 0 0;
                        }
                        .fall-item p 
                        {
                            font-style: italic;
                            position: relative;
                            color: #fff;
                            padding: 10px 20px 20px;
                            text-align: center;
                        }
                    .fall-effect .mask 
                    {
                        background-color: rgba(255, 255, 255, 0.7);
                        top: -200px;
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
                        filter: alpha(opacity=0);
                        opacity: 0;
                        -webkit-transition: all 0.3s ease-out 0.5s;
                        -moz-transition: all 0.3s ease-out 0.5s;
                        -o-transition: all 0.3s ease-out 0.5s;
                        -ms-transition: all 0.3s ease-out 0.5s;
                        transition: all 0.3s ease-out 0.5s;
                    }
                    .fall-effect h2 
                    {
                        -webkit-transform: translateY(-200px);
                        -moz-transform: translateY(-200px);
                        -o-transform: translateY(-200px);
                        -ms-transform: translateY(-200px);
                        transform: translateY(-200px);
                        -webkit-transition: all 0.2s ease-in-out 0.1s;
                        -moz-transition: all 0.2s ease-in-out 0.1s;
                        -o-transition: all 0.2s ease-in-out 0.1s;
                        -ms-transition: all 0.2s ease-in-out 0.1s;
                        transition: all 0.2s ease-in-out 0.1s;
                    }
                    .fall-effect p 
                    {
                        color: #333;
                        -webkit-transform: translateY(-200px);
                        -moz-transform: translateY(-200px);
                        -o-transform: translateY(-200px);
                        -ms-transform: translateY(-200px);
                        transform: translateY(-200px);
                        -webkit-transition: all 0.2s ease-in-out 0.2s;
                        -moz-transition: all 0.2s ease-in-out 0.2s;
                        -o-transition: all 0.2s ease-in-out 0.2s;
                        -ms-transition: all 0.2s ease-in-out 0.2s;
                        transition: all 0.2s ease-in-out 0.2s;
                    }
                    .fall-effect a.btn 
                    {
                        -webkit-transform: translateY(-200px);
                        -moz-transform: translateY(-200px);
                        -o-transform: translateY(-200px);
                        -ms-transform: translateY(-200px);
                        transform: translateY(-200px);
                        -webkit-transition: all 0.2s ease-in-out 0.3s;
                        -moz-transition: all 0.2s ease-in-out 0.3s;
                        -o-transition: all 0.2s ease-in-out 0.3s;
                        -ms-transition: all 0.2s ease-in-out 0.3s;
                        transition: all 0.2s ease-in-out 0.3s;
                    }
                    .fall-effect:hover .mask 
                    {
                        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
                        filter: alpha(opacity=100);
                        opacity: 1;
                        top: 0px;
                        -webkit-transition-delay: 0s;
                        -moz-transition-delay: 0s;
                        -o-transition-delay: 0s;
                        -ms-transition-delay: 0s;
                        transition-delay: 0s;
                    }
                    .fall-effect:hover h2 
                    {
                        -webkit-transform: translateY(0px);
                        -moz-transform: translateY(0px);
                        -o-transform: translateY(0px);
                        -ms-transform: translateY(0px);
                        transform: translateY(0px);
                        -webkit-transition-delay: 0.4s;
                        -moz-transition-delay: 0.4s;
                        -o-transition-delay: 0.4s;
                        -ms-transition-delay: 0.4s;
                        transition-delay: 0.4s;
                    }
                    .fall-effect:hover p 
                    {
                        -webkit-transform: translateY(0px);
                        -moz-transform: translateY(0px);
                        -o-transform: translateY(0px);
                        -ms-transform: translateY(0px);
                        transform: translateY(0px);
                        -webkit-transition-delay: 0.2s;
                        -moz-transition-delay: 0.2s;
                        -o-transition-delay: 0.2s;
                        -ms-transition-delay: 0.2s;
                        transition-delay: 0.2s;
                    }
                    .fall-effect:hover a.btn 
                    {
                        -webkit-transform: translateY(0px);
                        -moz-transform: translateY(0px);
                        -o-transform: translateY(0px);
                        -ms-transform: translateY(0px);
                        transform: translateY(0px);
                        -webkit-transition-delay: 0s;
                        -moz-transition-delay: 0s;
                        -o-transition-delay: 0s;
                        -ms-transition-delay: 0s;
                        transition-delay: 0s;
                    }
                

SơnPC 20

Chào mừng các bạn tới website của tôi

Đọc thêm
Hover Fall

Sơn 20 Sưu tầm