css3实现当鼠标经过图片是 图片上有一道倾斜的闪光划过

<style>
#img{width:205px;height: 242px;margin:50px auto;position: relative;overflow: hidden;}
#img:hover:before{ transition: left 0.7s;/*过渡,改变闪光的位置*/ left: 300px; }
#img:before{/*插入闪光*/
           content: '';
           position: absolute;
           width: 30px;
           height: 277px;
           top: 0;
           left: -100px;
           background-image: linear-gradient(to right,rgba(255,255,255,0.2) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,.2) 100%);/*linear-gradient渐变效果*/
           transform: skewX(-25deg);/*沿x轴倾斜*/   
           }

</style>

<div id="img" style="cursor: pointer;"><img src="img/149811355497321452.jpg" width="205" height="242"></div>