html
<div class="cardWait">
<div class="orgCard1">xxxxx</div>
//遮罩部分
<div class="mask-wrapper orgBtn cardT">
xxxxx
</div>
</div>
样式
.cardWait {
position: relative;
height: 100%;
overflow: hidden;
}
.cardWait:hover .orgCard1 {
opacity: 0.8;
}
.cardWait:hover .mask-wrapper {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
.cardT {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
backface-visibility: hidden;
line-height: 82px;
text-align: center;
color: #fff;
transition: all 3s;
}
.orgBtn {
display: flex;
align-items: center;
justify-content: space-around;
}