SOURCE

<div class="over-img">
  <div class="img1" ></div>    
  <i class="light"></i>  
</div>

.over-img{
    width:200px;
    height:200px;
    position: relative;
    overflow: hidden;
}
.img1{
    height:100%;
    background: #000;
}
.light{
    cursor: pointer;
    position: absolute;
    display: block;
    width:30px;
    height:100%;
    left:-100px;
    top:0;
    z-index:10;
    pointer-events: none;

    transition: left 3s;

    transform: skewX(-25deg);

    background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%);
}
.over-img:hover  .light{
   left:400px;
}