html图片悬停遮罩层,鼠标悬停图片显示遮罩层

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);

}

}

}