.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;
          }

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