div+css实现鼠标经过时图片有光泽效果

div+css实现鼠标经过时图片有光泽效果

——————– demo 开始 —————————

zappy

——————– 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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注