.light{
background:#fff;
width:180px;
height:180px;
margin:100pxauto;
position:relative;
text-align:center;
color:#333;
transform:translate3d(0,0,0);
}
.light-inner{
padding:60px30px0;
pointer-events:none;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
text-align:center;
transition: background0.35s;
backface-visibility:hidden;
}
.light-inner:before, .light-inner:after{
display:block;
content:"";
position:absolute;
left:30px;
top:30px;
right:30px;
bottom:30px;
border:1pxsolid#fff;
opacity:0;
transition: opacity0.35s, transform0.35s;
}
.light-inner:before{
border-left:0;
border-right:0;
transform:scaleX(0,1);
}
.light-inner:after{
border-top:0;
border-bottom:0;
transform: scaleY(1,0);
}
.light:hover .light-inner{
background:#458fd2
}
.light:hover .light-inner:before, .light:hover .light-inner:after{
opacity:1;
transform: scale3d(1,1,1);
}
.light-inner p{
transition: opacity .35s, transform0.35s;
transform: translate3d(0,20px,0);
color:#fff;
opacity:0;
line-height:30px;
}
.light:hover .light-inner p{
transform: translate3d(0,0,0);
opacity:1;
}