html鼠标下面显示信息,css如图，鼠标指上之后，下面透明遮罩上拉一小块，显示详细信息是如何实现的？...

大致原理是一样的

Document

.imgbox,.imgbox2{

width:200px;

height: 140px;

position:relative;

overflow: hidden;

}

img{

width:100%;

}

.imgbox:after{

position:absolute;

left: 0;

top:0;

display: block;

width:100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

content: attr(data-text);

transition:all 0.4s ease;

transform: translateY(-100%);

color: #FFF;

}

.imgbox2:after,.imgbox2:before{

position:absolute;

left: 0;

display: block;

height: 50%;

background-color: rgba(0, 0, 0, 0.5);

transition:all 0.4s ease;

color: #FFF;

content: '';

width: 100%;

}

.imgbox2:before{

top: 0;

transform: translateY(-100%);

}

.imgbox2:after{

bottom:0;

transform: translateY(100%);

}

.imgbox:hover:after{

transform: translateY(0);

}

.imgbox2:hover:after{

transform: translateY(0);

}

.imgbox2:hover:before{

transform: translateY(0);

}