<p class="overimg">

    <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>

    <i class="light"></i>

</p>

.overimg{

    position: relative;

    display: block;

    /* overflow: hidden; */

    box-shadow: 0 0 10px #FFF;

}

.light{

    cursor:pointer;

    position: absolute;

    left: -180px;

    top:;

    width: 180px;

    height: 90px;

    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

    transform: skewx(-25deg);

    -o-transform: skewx(-25deg);

    -moz-transform: skewx(-25deg);

    -webkit-transform: skewx(-25deg);

}

.overimg:hover .light{

    left:180px;

    -moz-transition:0.5s;

    -o-transition:0.5s;

    -webkit-transition:0.5s;

    transition:0.5s;

}