.thumb{position:relative}
.thumb img{border:1px solid #ddd;padding:4px;height:150px!important}
.thumb em{position: absolute;left: -290px;top: 0px;width: 150px;height: 160px;background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));backg--round-color: red;overflow: hidden;-webkit-transform: skewx(-25deg);-webkit-transition: 0s;}
.thumb:hover em{width: 150px;left:710px;-webkit-transition:0.8s}
html代码文件
<!DOCTYPE html> <html> <meta charset="UTF-8" /> <link rel="stylesheet" href="http://www.75271.com/style.css" type="text/css" media="screen, projection" /> <script type="text/javascript" src="http://www.75271.com/jquery-1.8.2.min.js"></script> </head> <body> <div class="thumb"> <img class=" width="580" height="150" src="http://www.75271.com/image-pending.png" /> <em></em> </div> </body>
开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明css实现图片鼠标滑过镜头炫光效果！
