HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示：

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图片可以替换成自己喜欢的