用hover实现图片遮罩层的出现和消失

最新推荐文章于 2022-10-25 10:02:03 发布

卡加加

最新推荐文章于 2022-10-25 10:02:03 发布

阅读量3.1k

点赞数 3

分类专栏： hover 文章标签： HTML/CSS hover

本文链接：https://blog.csdn.net/qq_43296909/article/details/89705711

版权

hover 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

用hover实现图片遮罩层的出现和消失

html部分

我在这里建立了三个盒子，可以看出div1里面包含div2和div3,div2和div3都是遮罩层。
遮罩层必须放在大盒子的里面

<div class="div1">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

css部分

我们先做div1和div2的样式部分，除了基本的宽高、背景颜色的设置，div1的位置必须是相对定位，div2也就是遮罩层必须是绝对定位。当鼠标移入的时候，遮罩层的透明度由0.6变成0，为了让切换看上去平滑一点，那么我们用了transition

 .div1{
        position: relative;       *相对定位*
        height:200px;
        width:200px;
        background-color: pink;
    }
    .div2{
        position: absolute;      *绝对定位*
        height:200px;
        width:200px;
        background-color: black;
        opacity: .6;      *透明度*
    }
    .div1:hover .div2{
        opacity: 0;        *透明度*
        transition: all .6s ease;
    }

css部分

接着我们来做div1和div3的样式部分，除了基本的宽高、背景颜色的设置，div1的位置必须是相对定位，div3也就是遮罩层必须是绝对定位。鼠标未移入div1,div3在盒子下面，并且隐藏，当鼠标移入的时候，div3就会进入div1，在这里，我用底部距离实现盒子的出现和隐藏。同样用transition实现动画的平滑性。

.div1{
        position: relative;    *相对定位*
        height:200px;
        width:200px;
        background-color: pink;
        overflow: hidden; *让多出盒子外的东西实现隐藏*
    }
.div3{
        position: absolute; *绝对定位*
        height:50px;
        width:200px;
        background-color: firebrick;
        bottom:-50px;
        opacity: .6;
    }
      .div1:hover .div3{
        bottom:0;
        transition: all .6s ease;
  }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
       padding:0;
        margin:0;
    }
    .div1{
        position: relative;
        height:200px;
        width:200px;
        background-color: pink;
        overflow: hidden;
    }
    .div2{
        position: absolute;
        height:200px;
        width:200px;
        background-color: black;
        opacity: .6;
    }
    .div3{
        position: absolute;
        height:50px;
        width:200px;
        background-color: firebrick;
        bottom:-50px;
          opacity: .6;
    }
    .div1:hover .div2{
        opacity: 0;
        transition: all .6s ease;
    }
    .div1:hover .div3{
        bottom:0;
        transition: all .6s ease;
     }
</style>
<body>
<div class="div1">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>
</body>
</html>

至此，我们实现了用hover实现图片遮罩层的出现和消失。