效果演示：
GIF压缩太大、故显示图片查看吧
代码目录：
主要代码实现：
CSS样式：
@charset "utf-8";* {margin: 0;padding: 0;list-style: none;}body {background-color: #1B1B1B}img {border: 0;cursor: pointer;}a {text-decoration: none;}.container01 .index-cont {width: 1200px;height: 990px;top: 100px;margin: 0 auto;position: relative;}.container01 .index-cont li {-moz-border-radius: 30px;/* Gecko browsers */-webkit-border-radius: 30px;/* Webkit browsers */border-radius: 30px;/* W3C syntax */position: absolute;width: 680px;height: 485px;top: 0;left: 0;overflow: hidden;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.container01 .index-cont .T02 {width: 500px;height: 235px;top: 0;left: auto;right: 0;}.container01 .index-cont .T03 {width: 500px;height: 235px;top: 250px;left: auto;right: 0;}.container01 .index-cont .T04 {width: 500px;height: 235px;top: auto;bottom: 250px;left: 0;}.container01 .index-cont .T05 {width: 500px;height: 235px;top: auto;bottom: 0;left: 0;}.container01 .index-cont .T06 {width: 430px;height: 485px;top: auto;bottom: 0;left: 520px;}.container01 .index-cont .T07 {width: 230px;height: 485px;top: auto;left: auto;bottom: 0;right: 0;background-color: #707070;}.container01 .index-cont .T07 p {width: 170px;padding: 40px 30px;color: #fff;text-indent: 2em;font-size: 16px;line-height: 20px;text-align: justify;}.container01 .index-cont .T07 img {position: absolute;bottom: 40px;right: 30px;}.container01 .index-cont:hover li {background: #000;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.container01 .index-cont:hover img.bg {opacity: 0.5;filter: alpha(opacity=50);-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.container01 .index-cont li:hover img.bg {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;box-shadow: 2px 2px 10px #333;}.container01 .index-cont li:hover {box-shadow: 2px 2px 10px #333;}.container01 .index-cont .overlay {opacity: 0;position: absolute;top: 0;left: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.container01 .index-cont .T01 .overlay {top: 190px;left: 310px;}.container01 .index-cont .T02 .overlay,.container01 .index-cont .T03 .overlay,.container01 .index-cont .T04 .overlay,.container01 .index-cont .T05 .overlay {top: 60px;left: 210px;}.container01 .index-cont .T05 .overlay {top: 60px;left: 200px;}.container01 .index-cont .T06 .overlay {top: 150px;left: 150px;}.container01 .index-cont:hover li .overlay {opacity: 1;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}.container01 .index-cont li:hover .overlay {opacity: 0;-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
部分HTML代码 :
<!doctype html><html><head><meta charset="utf-8"><title>css3鼠标悬停图片遮罩高亮显示图标效果</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><div class="container01"><div class="container clear"><div class="index-tatal"></div><ul class="index-cont"><li class="T01"><a href=""><img class="bg" src="image/index1-01.png" alt=""><div class="overlay"><img src="image/index-ICON01.png" alt=""></div></a></li><li class="T02"><a href=""><img class="bg" height="235" src="image/index1-02.png" alt=""><div class="overlay"><img src="image/index-ICON01.png" alt=""></div></a></li><li class="T03"><a href=""><img class="bg" height="235" src="image/index1-03.png" alt=""><div class="overlay"><img src="image/index-ICON02.png" alt=""></div></a></li><li class="T04"><a href=""><img class="bg" height="235" src="image/index1-04.png" alt=""><div class="overlay"><img src="image/index-ICON03.png" alt=""></div></a></li><li class="T05"><a href=""><img class="bg" height="235" src="image/index1-05.png" alt=""><div class="overlay"><img src="image/index-ICON04.png" alt=""></div></a></li><li class="T06"><a href=""><img height="485" class="bg" src="image/index1-06.png" alt=""><div class="overlay"><img src="image/index-ICON05.png" alt=""></div></a></li><li class="T07"><a href=""><p>自成立之始，久石人就以帮助最多设计师成功，实现每个设计师的设计理念和价值观，引领中国建筑设计达到国际领先水平为使命，坚持不懈，努力奋进！经过十年的积累与沉淀，已发展成为拥有2家分公司，三十多人的设计制作团队，具有先进设计和制作理念的数字科技公司。</p><img src="image/button.png" alt=""></a></li></ul></div></div></body></html>
上面的 image图片可以替换成自己喜欢的
源码获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新37/ 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
