鼠标悬停图片显示遮罩层

image.png

1.遮罩层为引用了图片，两张图片放在一个盒子里

image.png

2.遮罩层从上往下滑动

样式：

  .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;
                height: 302px;
                img {
                  width: 224px;
                  height: 302px;
                  margin-right: 70px;
                }
              }
              &:hover .message {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
                transform: translateY(-0px);
              }
            }
          }