.image-effect-future {  
   width: 500px;  
   height: 300px;  
   overflow: hidden;  
   position: relative;  
   margin: 0 auto;  
   text-align:center;  
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);  
  }  
  .image-effect-future .image-layer {  
   position: absolute;  
   top:0;  
   left: 0;  
   height: 300px;  
   overflow: hidden;  
   -webkit-transition: 0.4s;  
   transition: 0.4s;  
   z-index: 1;  
  }  
  .image-effect-future .share-layer {  
   position: absolute;  
   top: 50%;  
   left: 250px;  
   border: 1px solid transparent;  
   width: 0;  
   height: 0;  
   z-index: 10;  
   -webkit-transition: all 0.4s 0s, border 0.4s 0.6s, height 0.4s 0.4s, margin 0.4s 0.4s;  
   transition: all 0.4s 0s, border 0.4s 0.6s, height 0.4s 0.4s, margin 0.4s 0.4s;  
  }  
  .image-effect-future:hover .share-layer {  
   height: 200px;  
   width: 400px;  
   margin-top: -100px;  
   border-color: rgba(255, 255, 255, 0.5);  
   background-color: rgba(255, 255, 255, 0.3);  
   -webkit-transform: translateX(-200px);  
   transform: translateX(-200px);  
   -webkit-transition: all 0.4s 0.4s, border 0.4s 0s, height 0.4s 0s, margin 0.4s 0s;  
   transition: all 0.4s 0.4s, border 0.4s 0s, height 0.4s 0s, margin 0.4s 0s;  
  }  
  .image-effect-future .share-button {  
   display: inline-block;  
   text-decoration: none;  
   font-size: 13px;  
   color: #ffffff;  
   padding: 12px;  
   width: 70px;  
   border-radius: 2px;  
   opacity: 0;  
   margin: 80px 10px;  
  }  
  .image-effect-future:hover .share-button {  
   opacity: 1;  
   -webkit-transition: 0.4s;  
   transition: 0.4s;  
   -webkit-transition-delay: 0.7s;  
   transition-delay: 0.7s;  
  }  
  .share-via-facebook {  
   background-color:#3b5998;  
  }  
  .share-via-twitter {  
   background-color:#00aced;  
  }  
  .share-via-google {  
   background-color:#d34836;  
  }

<div class="image-effect-future">  
   <div class="share-layer">  
   <a class="share-button share-via-facebook" href="#"><i class=  
   "fa fa-facebook"></i> Facebook</a> <a class=  
   "share-button share-via-twitter" href="#"><i class="fa fa-twitter"></i>  
   Twitter</a> <a class="share-button share-via-google" href="#"><i class=  
   "fa fa-google"></i> Google +</a>  
   </div>  

   <div class="image-layer"><img alt="California surf" src="Ссылка на картинку-подложку" width="500"></div></div>