div {
	position:relative;
	width:200px;
	height:100px;
	border:1px #000 solid;
}
div figcaption {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	overflow:hidden;
	z-index:999;
}
div  figcaption::before,div figcaption::after {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	content:'';
	opacity:0;
	pointer-events:none;
	-webkit-transition:opacity 0.4s,-webkit-transform 0.4s;
	transition:opacity 0.4s,transform 0.4s;
}
div figcaption::before {
	border-top:2px solid #f00;
	border-bottom:2px solid #f00;
	-webkit-transform:scale(0,1);
	transform:scale(0,1);
}
div figcaption::after {
	border-right:2px solid #f00;
	border-left:2px solid #f00;
	-webkit-transform:scale(1,0);
	transform:scale(1,0);
}
div:hover figcaption::before,div:hover figcaption::after {
	opacity:1;
	-webkit-transform:scale(1);
	transform:scale(1);
}