a{ text-decoration:none; }

figure{
  position:relative;
  width:300px; height:300px;
  left:50%;
  margin-left:-150px;
  background:skyblue;
}

figure:hover figcaption{ opacity: 1; }
figure:hover .line::before { width: 80%; }
figure:hover .line::after { width: 80%; }
figure:hover .line span::before { height: 80%; }
figure:hover .line span::after { height: 80.5%; }


figcaption{
  position:relative;
  width:300px; height:300px;
  background:rgba(0,0,0,0.7);
  opacity:0;
  transition: all 0.5s;
}

a figcaption p{
  color:#fff; font-weight:bold; font-size:40px; 
  text-align:center; line-height:300px;
}

.line::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    transition: all 0.5s;
    left: 10%;
    top: 10%;
    width: 0%;
    height: 2px; 
}

.line::after {
  content: "";
  position: absolute;
  background: rgba(230, 230, 230, 0.7);
  display: inline-block;
  transition: all 0.5s;
  left: 10%;
  top: 90%;
  width: 0%;
  height: 2px; }

.line span::before {
  content: "";
  position: absolute;
  background: rgba(230, 230, 230, 0.7);
  display: inline-block;
  transition: all 0.5s;
  left: 10%;
  top: 10%;
  width: 2px;
  height: 0%; }

.line span::after {
  content: "";
  position: absolute;
  background: rgba(230, 230, 230, 0.7);
  display: inline-block;
  transition: all 0.5s;
  left: 90%;
  top: 10%;
  width: 2px;
  height: 0%; }