div+css实现鼠标经过时图片有光泽效果
——————– demo 开始 —————————
——————– demo 结束 —————————
<!DOCTYPE html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>div+css实现鼠标经过时图片有光泽效果</title>
<style>
body{ background:#f2f2f2;}
.thumb {
width: 311px;
height: 185px;
position: relative;
overflow:hidden;
border:4px solid #009cff;
}
.thumb img {
width:311px;
height:185px
}
.thumb em {
position: absolute;
left: -250px;
top: 0;
width: 313px;
height: 185px;
background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
-moz-transition: 0s;
-o-transition: 0s;
-webkit-transition: 0s;
transition: 0s;
cursor: pointer;
}
.thumb:hover em {
left:245px;
transition:.7s;
-moz-transition:.7s;
-o-transition:.7s;
-webkit-transition:.7s
}
.thumb .angle {
position:absolute;
top:169px;
left:10px
}
.thumb .angle:after {
content: " ";
position: absolute;
border: 8px dashed transparent;
border-bottom: 8px solid #fefefe;
width: 0;
height: 0;
font-size: 0;
}
</style>
</head>
<body>
<!--重点是 em 标签的处理-->
<div class="thumb">
<a title="吕神的自我修养" href="http://www.lrxin.com/" target="_blank">
<img width="311" height="185" src="http://www.lrxin.com/wp-content/uploads/2016/11/custom-scrollbar-200x150.png" class="attachment-thumbnail wp-post-image" alt="zappy">
<em></em>
</a>
<span class="angle"></span>
</div>
</body>
</html>