css实现鼠标放上去半透明光片划过效果

.box {
                position: relative;
                overflow: hidden;
                cursor: pointer;
                width: 200px;
            }

            .box img {
                width: 100%;
            }

    .box:before {
                content: "";
                position: absolute;
                top: 0;
                left: -127px;
                width: 100px;
                height: 100%;
                transform: skewX(-30deg);
                background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5) 50%, hsla(0, 0%, 100%, 0));
            }

            .box:hover:before {
                left: 240px;
                transition: all .3s ease-in;
            }

    <div class="box">
            <img src="http://www.lvyestudy.com/img/dance.gif" alt="" />
        </div>