HTML:

CSS:

div{       width: 200px; height: 200px; margin: 200px auto; background: #000;       position: relative;-webkit-backface-visibility: hidden;    backface-visibility: hidden;}     div::after{           border-right: 1px solid #fff;        border-left: 1px solid #fff;        -webkit-transform: scale(1,0);        transform: scale(1,0);                }     div::before{                 border-top: 1px solid #fff;        border-bottom: 1px solid #fff;        -webkit-transform: scale(0,1);        transform: scale(0,1);     }     div::before,div::after{    position:absolute;  top:30px;  right:30px;  bottom:30px;  left:30px;  content:'';  opacity:0;  -webkit-transition:opacity .35s,-webkit-transform .35s;  transition:opacity .35s,transform .35s   pointer-events: none;     }          div:hover::after,div:hover::before {  opacity:1;  -webkit-transform:scale(1);  transform:scale(1)}     body{background: yellowgreen;}     *, :after, :before, input[type=search] {    box-sizing: border-box;    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    text-align: center;}

demo: