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

效果演示：

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天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

在这里插入图片描述