* {
margin:0;
padding:0;
}
.boxF,.boxS,.boxT,.overlay {
width:200px;
height:250px;
overflow:hidden;
}
.boxF {
transform:rotate(120deg);
float:left;
margin-left:10px;
}
.boxS {
transform:rotate(-60deg);
}
.boxT {
transform:rotate(-60deg);
background:no-repeat center;
background-size:cover;
cursor:pointer;
/* background:no-repeat 50% center;
background-size:125% auto;
visibility:visible;
*/
}
.overlay {
transition:all 250ms ease-in-out 0s;
position:relative;
text-align:center;
padding-top:100px;
height:0px;
color:#fff;
bottom:-120px;
}
.overlay:hover {
background-color:rgba(0,0,0,0.6);
}
.boxT:hover .overlay {
height:300px;
bottom:0px;
}
更新时间:2023-06-11 23:19:58
鼠标滑过六边形会显示蒙层和内容,鼠标滑过六边形右侧区域可以从下到上显示出六边形