在百度音樂 http://music.baidu.com/ 看到這么一個圖片效果，當鼠標移上去的時候，會有一道閃光在圖片上劃過，效果挺酷炫的。于是把這個效果再實現一下：

HTML 設計成這樣：

<p class="overimg">	<a><img src="/uploads/allimg/140629/0123035461-0.jpg"></a>	<i class="light"></i></p>

CSS 為：

.overimg{	position: relative;	display: block;	/* overflow: hidden; */	box-shadow: 0 0 10px #FFF;}.light{	cursor:pointer;	position: absolute;	left: -180px;	top: 0;	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;}

同時在 i 層使用 cursor:pointer，如果不設置這個的話，需要等透明層動畫之后才能看得到 pointer 指針。

打開 F12 調試來看會更加清楚
。