<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3动画-图片开关灯阴影效果</title>
<style type="text/css">
ul,li{list-style: none;}
.toppic li{
width: 280px;height: 160px;
float: left;background: #000;
overflow: hidden;margin: 10px;
}
.toppic li img{width: 100%;height: 100%;}
.toppic li i {
display: block;
opacity: 0.7;
-moz-transition: all .5s ease;
-webkit-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
}
.toppic li:hover i {
opacity: 1;
}
</style>
</head>
<body>
<ul class="toppic">
<li><i><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></i></li>
<li><i><img src="http://www.duanlonglong.com/uploads/190217/1-1Z21G145363c.jpg"></i></li>
</ul>
</body>
</html>
CSS实现鼠标移到图片上，图片变亮效果
内容版权声明：除非注明，否则皆为本站原创文章。