Красивый CSS эффект при наведении на блоки

<link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
<style>
/* Block Code */
.box{
 position: relative;
 perspective: 1000px;
}
.box .box-img{
 transform: rotateY(0);
 transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-img{
 transform: rotateY(-90deg);
}
.box .box-img img{
 width: 100%;
 height: auto;
}
.box .box-content{
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 padding: 60px 20px;
 text-align: center;
 background: rgba(0,0,0,0.7);
 transform: rotateY(90deg);
 transition: all 0.50s ease-in-out 0s;
}
.box:hover .box-content{
 transform: rotateY(0);
}
.box .title{
 font-size: 20px;
 color: #fff;
 text-transform: uppercase;
}
.box .description{
 font-size: 14px;
 line-height: 24px;
 color: #fff;
}
.box .title:after,
.box .description:after{
 content: "";
 width: 80%;
 display: block;
 border-bottom: 1px solid #fff;
 margin: 15px auto;
}
.box .social-links{
 margin: 0;
 padding: 0;
 list-style: none;
}
.box .social-links li{
 display: inline-block;
 margin: 0 10px;
}
.box .social-links li a{
 font-size: 20px;
 color: #a6a6a6;
}
.box .social-links li a:hover{
 text-decoration: none;
 color: #fff;
}
@media only screen and (max-width: 990px) {
 .box{ margin-bottom:20px; }
}
@media only screen and (max-width: 479px) {
 .box .box-content{ padding: 20px; }
}
</style>
 
 <div class="container">
 <div class="row">
 
 <div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="/templates/modern/svit/images/1.jpg" alt="demo image 1">
 </div>
 <div class="box-content">
 <h4 class="title">Suvorov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>
 
 <div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="/templates/modern/svit/images/1.jpg" alt="demo image 2">
 </div>
 <div class="box-content">
 <h4 class="title">Nahimov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>
 
 <div class="col-md-4 col-sm-6">
 <div class="box">
 <div class="box-img">
 <img src="/templates/modern/svit/images/1.jpg" alt="demo image 3">
 </div>
 <div class="box-content">
 <h4 class="title">Ushakov</h4>
 <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.</p>
 <ul class="social-links">
 <li><a href="#" class="fa fa-qq"></a></li>
 <li><a href="#" class="fa fa-weibo"></a></li>
 <li><a href="#" class="fa fa-weixin"></a></li>
 </ul>
 </div>
 </div>
 </div>
 
 </div>
 </div>