Segue exemplo:
div.classe {
position: relative;
float: left;
padding: 0 10px;
width: 80%;
height: 100px;
background: rgba(38, 166, 91, 0.5);
margin-top: 30px;
transition: all 0.4s ease-out;
}
div.classe:after {
content:"";
height: 70px;
width: 70px;
position: absolute;
bottom: 0;
left: 0;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
z-index:-1;
margin-bottom:-4px;
margin-left: -4px;
border-color
}
div.classe:before {
content:"";
height: 70px;
width: 70px;
position: absolute;
top: 0;
right: 0;
border-right: 4px solid #000;
border-top: 4px solid #000;
z-index:-1;
margin-top:-4px;
margin-right: -4px;
}
div.classe:hover{
transform: translateY(-20px);
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
div.classe:hover::after{
border:none;
content:"";
position: absolute;
top: 0;
left: 0;
border-left: 4px solid #000;
border-top: 4px solid #000;
}
div.classe:hover::before{
transform: translateY(30px);
border:none;
content:"";
position: absolute;
bottom: 0;
right: 0;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
}
<div class="classe">
<p>
texto qualquer
</p>
</div>
Seguindo a sugestão do Gabriel.H segue uma versão com "delay" na transição:
div.classe {
position: relative;
float: left;
padding: 0 10px;
width: 80%;
height: 100px;
background: rgba(38, 166, 91, 0.5);
margin-top: 30px;
transition: all 0.4s ease-out;
}
div.classe:after {
content:"";
height: 70px;
width: 70px;
position: absolute;
bottom: 0;
left: 0;
border-left: 4px solid #000;
border-bottom: 4px solid #000;
z-index:-1;
margin-bottom:-4px;
margin-left: -4px;
border-color
}
div.classe:before {
content:"";
height: 70px;
width: 70px;
position: absolute;
top: 0;
right: 0;
border-right: 4px solid #000;
border-top: 4px solid #000;
z-index:-1;
margin-top:-4px;
margin-right: -4px;
}
div.classe:hover{
transform: translateY(-20px);
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
div.classe:hover::after{
border:none;
content:"";
position: absolute;
top: 0;
left: 0;
border-left: 4px solid #000;
border-top: 4px solid #000;
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
div.classe:hover::before{
transform: translateY(30px);
border:none;
content:"";
position: absolute;
bottom: 0;
right: 0;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
-webkit-transition: 0.5s ease-in;
-moz-transition: 0.5s ease-in;
-o-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
<div class="classe">
<p>
texto qualquer
</p>
</div>