.container .box{
     position: relative;
     width:100%;
     background-color: black;
     box-sizing: border-box;
     overflow: hidden;
     box-shadow: 3px 6px 33px -3px rgba(0,0,0,0.75);
}
 .container .box:before{
    content: "";
    position: absolute;
    top:10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    box-sizing: border-box;
    transition: .5s;
    transform: scaleX(0);
    opacity: 0;
    z-index: 1;
    display: inline-block;
    padding-bottom: calc(100% / (3 / 2) );

}
.container .box:hover:before
{
    transform: scaleX(1);
    opacity: 1;
}

.container .box:after{
    content: "";
    position: absolute;
    top:10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-left: 1px solid white;
    border-right: 1px solid white;
    box-sizing: border-box;
    transition: .5s;
    transform: scaleY(0);
    opacity: 0;
    z-index: 1;

}
.container .box:hover:after
{
    transform: scaleY(1);
    opacity: 1;
}
.container .box .img-box{
    position: relative;
}
.container .box .img-box img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    transition: 0.5s;
    display: block;  
}
.container .box:hover .img-box img{
    opacity: .2;
    transform: scale(1.2);
}
.container .box .content{
    position: absolute;
    width: 100%;
    top:50%;
    transform: translateY(-50%);
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
   
}
.container .box .content h4{
   margin: 0 0 10px;
    padding: 0;
    color: #ef8421;
    transition: 0.5s;
    transform: translateY(-50px);
    opacity: 0;
    visibility: hidden;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 24px;
}
.container .box .content p{
   font-size: 13px;
    margin: 0;
    padding: 0;
    color: white;
    line-height: 18px;
    transition: 0.5s;
    transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
}
.container .box:hover .content h4,.container .box:hover .content p
{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    transition-delay: 0.2s;

}

.footer{
  text-align: center;
}