鼠标悬停 显示遮罩层

 HTML部分:

 css部分: 

  .smallbox {
            width: 100%;
            .card {
              position: relative;
              top: 0;
              left: 0;
              width: 224px;
              height: 302px;
              margin-right: 70px;
              overflow: hidden;

              img {
                width: 224px;
                height: 302px;
                margin-right: 70px;
              }
              .message {
                position: absolute;
                // bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                transition: all 1s;
                transform: translateY(100%);
                width: 224px