.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>