Belarus Effect для блоков

<style>
.box{
 position: relative;
 box-shadow: 0 0 5px #555;
}
.box img{
 width: 100%;
 height: auto;
 transition: all 0.3s ease 0s;
}
.box:hover img{
 filter: brightness(0.4);
}
.box .boxContent{
 width: 80%;
 height: 80%;
 position: absolute;
 top: 10%;
 left: 10%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 text-align: center;
 transform: scale(0, 1);
 transition: all 0.35s ease 0s;
}
.box:hover .boxContent{
 transform: scale(1);
}
.box .title{
 font-size: 25px;
 font-weight: 600;
 color: #fff;
 margin: 23% 0 20px;
 transform: translate3d(0, -100%, 0);
 transition: all 0.35s ease 0s;
}
.box .post{
 display: block;
 font-size: 16px;
 color: #fff;
 text-transform: capitalize;
 transform: translate3d(0, 100%, 0);
 transition: all 0.35s ease 0s;
}
.box:hover .title,
.box:hover .post{
 transform: translate3d(0, 0, 0);
}
@media only screen and (max-width: 990px){
 .box{ margin-bottom: 25px; }
}
</style>
 
<div class="container">
<div class="row">
 
 <div class="col-md-4 col-sm-12">
 <div class="box">
 <img src="/templates/modern/svit/images/1.jpg">
 <div class="boxContent">
 <h3 class="title">Белоруссия</h3>
 <span class="post">Респу́блика Белару́сь</span>
 </div>
 </div>
 </div>
 
 <div class="col-md-4 col-sm-12">
 <div class="box">
 <img src="/templates/modern/svit/images/1.jpg">
 <div class="boxContent">
 <h3 class="title">Олимпиада</h3>
 <span class="post">The Rio Olympics</span>
 </div>
 </div>
 </div>
 
 <div class="col-md-4 col-sm-12">
 <div class="box">
 <img src="/templates/modern/svit/images/1.jpg">
 <div class="boxContent">
 <h3 class="title">ВМЕСТЕ</h3>
 <span class="post">Россия & Белоруссия</span>
 </div>
 </div>
 </div>