<div class="container">
  <img src="https://images.pexels.com/photos/227294/pexels-photo-227294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
  <h2>Some Name</h2>
  <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #262626;
  font-family: Verdana;
  padding: 0;
  margin: 0;
}
.container{
  position: relative;
  width: 300px;
  height: 450px;
  cursor: pointer;
  overflow: hidden;  
  background: #fff;
  
  &:before{
    content: '';
    position: absolute;
    top: 0;
    left: 170%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.2);    
    transition: .8s;
    transform: skewX(45deg);
  }
    
  img{
    max-width: 100%; 
    max-height: 100%;
    filter: grayscale(100%);
    transition: 2s;
  } 
  
  h2{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 18px;  
    background: #fff;
    transition: .5s;
    padding: 10px 0;  
    margin: 0;
    transform-origin: bottom;
    transform: perspective(500px) rotateX(90deg);
  }
  
  &:hover {
    &:before{
      left: -170%;
      transition-delay: 1.1s;
    }
    & img{
      filter: grayscale(0);
      transform: scale(1.2);
    }
    & h2{
      transform: perspective(500px) rotateX(0deg);    
    }
    & li{
      transform: perspective(1000px) rotateY(0deg);
      
      &:nth-child(1){
        transition-delay: .5s;
      }
      &:nth-child(2){
        transition-delay: .8s;
      }
      &:nth-child(3){
        transition-delay: 1.1s;
      }
    }
  }    
  
  ul{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
  }
  
  li{
    $size: 40px;
    
    list-style: none;
    width: $size;
    height: $size;
    border-bottom: 1px solid rgba(0,0,0,.1);
    line-height: 40px;
    text-align: center;
    background: #fff;
    transition: .5s;
    transform-origin: left;
    transform: perspective(1000px) rotateY(90deg);
  }
  
  .fa{
    color: #262626;
  }
}