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

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

Danh mục bài viết

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

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

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

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>