像这种效果：
image.png
1. display显示隐藏元素但是不保留位置
2. visibility显示隐藏元素但是保留原来的位置
3. overflow 溢出显示隐藏但是只是对于溢出的部分处理

案例作用：

  1. 练习元素的显示与隐藏
  2. 练习元素的定位

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来。

上

效果图
image.png
图片素材：demo31.pngplay.png

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  16.     .girl {
  17.       position: relative;
  18.       width: 402px;
  19.       height: 224px;
  20.       margin: 50px auto;
  21.     }
  23.     .girl img {
  24.       width: 100%;
  25.       height: 100%;
  26.     }
  28.     .girl .mask {
  29.       position: absolute;
  30.       top: 0;
  31.       left: 0;
  32.       width: 402px;
  33.       height: 224px;
  34.       background: rgba(0, 0, 0, .4) url(play.png) no-repeat center;
  35.     }
  36.   </style>
  37. </head>
  39. <body>
  40.   <div class="girl">
  41.     <img src="demo31.png" alt="">
  42.     <div class="mask"></div>
  43.   </div>
  44. </body>
  46. </html>

下

修改的部分

    .girl .mask {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 402px;
      height: 224px;
      background: rgba(0, 0, 0, .4) url(play.png) no-repeat center;
    }

添加的部分

    .girl:hover .mask {
      display: block;
    }

这样效果就好了