CSS添加盒子触碰光效

想要给如下盒子添加触碰光效:

​ 实现的效果如下:

​

实现原理:

触碰后隐藏在主盒子左边的透明亮光盒子向右快速移动使亮光出现在主盒子上实现效果

html部分:

导入

    <link rel="stylesheet" href="./favicon.ico">
 
    <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
 
    <link rel="stylesheet" href="./css/1.css">

 <!-- 栅格布局 -->
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <a href="">
                    <img src="./images/omi.png" alt="">
                    <h3>OMG</h3>
                    <p>开发现代化的web组件化框架</p>
                </a>
            </div>
 
        </div>

bootstrap及删格系统 - 掘金 (juejin.cn))

less部分:

.row>div {
    height: 192px;
    // background-color: chartreuse;
 
    a {
        display: block;
        text-align: center;
        text-decoration: none;
        padding: 20px 10px;
        color: #fff;
        // 盒子升起和阴影的过渡
        transition: all 0.5s;
        // 隐藏盒子外的部分
        overflow: hidden;
        // 添加相对定位
        position: relative;
 
        // 触碰触发盒子升起和阴影
        &:hover {
            box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
            transform: translateY(-8px);
        }
 
        // 添加绝对定位
        &::before {
            content: '';
            position: absolute;
            left: -115%;
            top: 0;
            width: 100%;
            height: 100%;
            // 盒子从左到右的渐变色,左右透明中间亮光
            background-image: linear-gradient(to right, transparent,
                    rgba(255, 255, 255, 0.6),
                    transparent);
            // 盒子变成平行四边形
            transform: skew(-30deg);
 
        }
 
        //    触碰触发盒子移动和过渡
        &:hover::before {
            left: 115%;
            transition: all 0.8s;
        }
 
 
    }
 
    &:nth-child(1) a {
        background-color: #7ec3ff;
    }
 
    &:nth-child(2) a {
        background-color: #e41b68;
    }
 
    &:nth-child(3) a {
        background-color: #19191e;
    }
 
    &:nth-child(4) a {
        background-color: #08b021;
    }
 
}