目前想到两个方式：
通过在里层多增加一个i标签模拟实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox i {
position: absolute;
left: -100%;
top: 0;
100%;
height: 100%;
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}
.imgbox:hover i {
left: 100%;
transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s
}
</style>
</head>
<body>
<div class="imgbox">
<img src="img.jpg" />
<i></i>
</div>
</body>
</html>
二：通过伪类方式模拟，减少i标签。高级浏览器识别
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.imgbox{350px;height:350px;overflow:hidden;position:relative;margin:100px auto;}
.imgbox:after{
content: "";
display:block;
position: absolute;
left: -100%;
top: 0;
100%;
height: 100%;
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0))
}
.imgbox:hover:after{
content: "";
display:block;
left: 100%;
transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s
}
</style>
</head>
<body>
<div class="imgbox">
<img src="img.jpg" />
</div>
</body>
</html>
转自：https://www.cnblogs.com/mmdrs/articles/3708564.html
