HTML:
<p class="overimg">
<a><img src="raspberry.jpg"></a>
<i class="light"></i>
</p>
CSS:
.overimg{
position: relative; width:500px; height:335px;
}
.light{
cursor:pointer;
position: absolute;left: -500px;top: 0;
width: 500px;height: 335px;
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 a img{ width:100%; height:100%;}
.overimg:hover .light{
left:500px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}