html代码
<div class="boxF pic1"> <div class="boxS"> <div class="boxT" style="background-image: url(1.jpg);"> <div class="overlay"> <a>正六边形</a> </div> </div> </div> </div>
css代码
.lineF, .lineS
{
position: absolute;
visibility: hidden;
}
.lineS
{
top: 182px;
left: 105px;
}
.boxF, .boxS, .boxT, .overlay
{
width: 240px;
height: 290px;
overflow: hidden;
}
.boxF, .boxS
{
visibility: hidden;
}
.boxF
{
transform: rotate(30deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
.boxS
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT
{
transform: rotate(30deg);
background: no-repeat 50% center;
background-size: 100% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
.overlay
{
transition: all 250ms ease-in-out 0s;
display: none;
position: relative;
}
.overlay:hover
{
background-color: rgba(0,0,0,0.6);
cursor: pointer;
}
.boxT:hover .overlay
{
display: block;
}
.overlay a
{
transform: rotate(90deg);
display: block;
/*display: inline-block;*/
position: absolute;
left: 14%;
top: 45%;
text-align: center;
width: 220px;
height: 32px;
line-height: 35px;
color: White;
font-size: 24px;
font-weight: normal;
}