文字遮罩和二级菜单

    .box{
              width:200px;
              height:300px;
              margin:50px auto 0;
              border: 1px solid #000;
              position:relative;
              overflow:hidden;
    }
    .box .info{
                    width: 200px;
                    height:300px;
                    background-color:rgba(0,0,0,0.5);
                    color:white;
                    position:absolute;
                    left:0;
                    top:300px;
                    transition:all 500ms ease;
      }
    .box:hover .info{
                top:150px;
          }

鼠标移到上面文本背景半透明显示出来。

二级菜单

  .box{
          width:200px;
          height:300px;
          margin:50px auto 0;
          border:1px solid #000;
          position: relative;
          }
    .box .info{
                  width:200px;
                  height:300px;
                  background-color:rgba(0,0,0,0.5);
                  color:white;
                  position:absolute;
                  left:200px;
                  top:0px;
                  display:none;
              }

运行结果是：在图片的右边弹出来一个二级标，签背景为半透明。