css3一道闪光

<style type="text/css">
            .overimg{
                position: relative;
                display: block;
                /* overflow: hidden; */
                box-shadow: 0 0 10px #FFF;
            }
            .light{
                cursor:pointer;
                position: absolute;
                left: -204px;
                top: 0;
                width: 204px;
                height: 250px;
                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:204px;
                -moz-transition:0.5s;
                -o-transition:0.5s;
                -webkit-transition:0.5s;
                transition:0.5s;
            }

        </style>

 

<p class="overimg">
                <a href="http://www.codetc.com">
                    <img src="http://www.codetc.com/data/attachment/portal/201503/20/201044djj54krtz614ag6n.jpg">
                </a>
                <i class="light"></i>
            </p>