仿土豆网显示隐藏遮罩案例

站长

2022年09月08日 16:35 · 阅读数 487

<!DOCTYPE html><html lang="en"> <head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>仿土豆网显示隐藏遮罩案例</title>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .tudou {
    position: relative;
    width: 444px;
    height: 320px;
    background-color: pink;
    margin: 100px auto;
  }
  .tudou > img {
    width: 100%;
    height: 100%;
  }
  .tudou .mask {
    /* 隐藏遮罩层 */
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4) url(./images/arr.png) no-repeat center
      center;
  }
  /* 当我们鼠标经过了 土豆这个盒子，就让里面的遮罩层显示出来 */
  .tudou:hover .mask {
    /* 显示元素 */
    display: block;
  }
</style>

</head> <body>

<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>
<div class="tudou">
  <img src="./images/tudou.jpg" alt="" />
  <div class="mask"></div>
</div>

</body></html>

转载自:https://segmentfault.com/a/1190000041922040