.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>