CSS实现鼠标移到图片上,图片变亮效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3动画-图片开关灯阴影效果</title><style type="text/css">ul,li{list-style: none;}...
<!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>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章