[CSS Đẹp – P1] – Hiệu ứng kính trượt Sliding Glass đẹp khi hover hình ảnh với CSS

Posted on by admin

Hiệu ứng hover ảnh tạo các vệt sáng tối hay bóng gương phù hợp cho việc làm đẹp banner, ảnh sản phẩm hay logo. Các hiệu ứng này đều chỉ đơn giản với CSS + HTML

Kiểu 1: Vệt tối từ 2 bên chạy vào trong

Link demo: https://codepen.io/huy-n-l/pen/ZEQQgjL

Hiệu ứng bóng gương đẹp khi hover hình ảnh với CSS

Code:

<div class="hover-2">
    <a href="https://daivietweb.com" class="banner">
        <img src="https://daivietweb.com/images/banner-main-board.jpg" />
    </a>
</div>
<style type="text/css">
    .hover-2 a{
        position:relative;
        display:block;
        width:100%;
        height:100%;
        overflow:hidden;
    }
    .hover-2 a:before{
        border-color:#000 transparent transparent;
        border-style:solid;
        border-width:0;
        content:"";
        height:0;
        left:0;
        opacity:0.2;
        position:absolute;
        top:0;transition:all 0.5s ease-in-out;
        width:0;
    }
    .hover-2 a:after{
        border-color:transparent transparent #000;
        border-style:solid;
        border-width:0;
        bottom:0;
        content:"";
        height:0;
        opacity:0.2;
        position:absolute;
        right:0;
        transition:all 0.5s ease-in-out;
        width:0;
    }
    .hover-2 a:hover:before{
        border-width:280px 250px 0 0;
        transition:all 0.3s ease-in-out;
        z-index:1;
    }
    .hover-2 a:hover:after{
        border-width:0 0 280px 250px;
        transition:all 0.3s ease-in-out;
        z-index:1;
    }
</style>

Kiểu 2: Hiệu ứng kính trượt liên tục trên ảnh

Link demo: https://daivietweb.com/demo/sliding-glass.html

sliding glass

Code html + css

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tiêu đề web </title>
    <meta name="description" content="Đây là mô tả về trang web">
    <style type="text/css">
        .banner {position: relative;width: 600px;}
        @keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}
        @keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}}
        .banner a:after, .banner a:before {
            content: "";
            position: absolute;
            top: 50%;
            width: 30px;
            height: 100%;
            transform: translateY(-50%);
            background-color: rgba(255,255,255,.75);
            z-index: 999999999;
        }
        .banner a:before {
            left: -5%;
            animation: light-left 3s infinite alternate linear;
        }
        .banner a:after{
            right: -5%;
            animation: light-right 3s infinite alternate linear;
        }
    </style>
</head>
<body>
    <div class="banner">
        <a href="https://daivietweb.com">
            <img src="iphone-x.jpg">
        </a>
    </div>
</body>
</html>

 

Kiểu 3: Hiệu ứng kính trượt khi hover chuột lên ảnh

Link demo: https://daivietweb.com/demo/image-hover.html

bong guong khi hover qua anh

Code html + css:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tiêu đề web </title>
    <meta name="description" content="Đây là mô tả về trang web">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
        .product{
            background-color: #ddd;
            padding: 10px;
            width: 400px;
            position: relative;
            margin: 0 auto;
        }
        .product::after {
            background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) repeat scroll 0 0;
            content: "";
            display: block;
            height: 100%;
            position: absolute;
            right: -75%;
            top: 0;
            transform: skewX(-25deg);
            width: 50%;
            z-index: 2;
        }
        .product:hover::after {
            animation: 1s ease 0s normal none 1 running fixedAnim;
            animation: 1s ease 0s normal none 1 running fixedAnim;
            -webkit-animation: 1s ease 0s normal none 1 running fixedAnim;
            -moz-animation: 1s ease 0s normal none 1 running fixedAnim;
        }
        @-webkit-keyframes fixedAnim {
            0% {
                right: 125%;
            }
            125% {
                right: 0;
            }
        }

        @-moz-keyframes fixedAnim {
            0% {
                right: 125%;
            }
            125% {
                right: 0;
            }
        }

        @keyframes fixedAnim {
            0% {
                right: 125%
            }
            125% {
                right: 0;
            }
        }
    </style>
</head>
<body>
    <div class="product">
            <img src="iPhone-11.jpg">
    </div>
</body>
</html>

Có thể bạn quan tâm

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments
TƯ VẤN THIẾT KẾ WEBSITE
THUÊ HOSTING
.
.
.