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); }