How to make Image hover border animation effect with HTML & CSS

Step 1: HTML

<div class="box">
<div class="layer">
<img src="https://picsum.photos/600/400/?random" alt="">
<div class="caption">
<div class="about">
<h2>Image Hover Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div>
</div>
</div>
</div>

Step 2: css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #555d5d;
}
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
width: 600px;
height: 400px;
overflow: hidden;
}
.layer{
width: 100%;
height: 100;
}
.layer img{
width: 100%;
height: 100;
transition: .5s;
}
.box:hover .layer img{
transform: scale(1.3) rotate(-10deg) ;
opacity: 0.5;
}
.about{
width: 100%;
height: 100%;
color: #fff;
text-align: center;
padding: 20px;
display: table;
opacity: .5;
transition: .5s;
}
.box:hover .about{
opacity: 1;
}
.about h2,
.about p{
padding-top: 50px;
text-shadow: 0 0 4px #000;
}
.box .caption{
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
}
.box .caption:before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-top: 2px solid #bbb;
border-bottom: 2px solid #bbb;
transition: .5s;
transform: scale(0,1);
}
.box:Hover .caption:before{
transform: scale(1,1);
}
.box .caption:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-left: 2px solid #bbb;
border-right: 2px solid #bbb;
transition: .5s;
transform: scale(1,0);
}
.box:Hover .caption:after{
transform: scale(1,1);
}