<html>
  <body>

<div class="container">
  <div class="employee-container">
    <div class="row">
      <div class="col-lg-4 employee-1">
        <div class="employee">
          <div class="employee-image">
            <img src="http://resources.panderasystems.com/wp-content/uploads/2018/09/slip-maan.png" class="img-fluid d-block m-auto" alt="employee-image">
            </div>
          <div class="employee-details">
            <div class="employee-name">
              <h1 class="text-center">Benjamin<br><span class="employee-role">Developer</span></h1>
              </div>
            <div class="employee-social-link">
                <ul>
                  <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                  <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
                  <li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
                  <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
                  <li><i class="fa fa-behance" aria-hidden="true"></i></li>
              </ul>
          </div>
          </div>
        </div>
        </div>
        <div class="col-lg-4 employee-1">
        <div class="employee">
          <div class="employee-image">
            <img src="https://www.duraplas.com.au/wp-content/uploads/2015/08/Smiling-young-casual-man-2.png" class="img-fluid d-block m-auto" alt="employee-image">
            </div>
          <div class="employee-details">
            <div class="employee-name">
              <h1 class="text-center">Jackson<br><span class="employee-role">Designer</span></h1>
              </div>
            <div class="employee-social-link">
                <ul>
                  <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                  <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
                  <li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
                  <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
                  <li><i class="fa fa-behance" aria-hidden="true"></i></li>
              </ul>
          </div>
          </div>
        </div>
        </div>
        <div class="col-lg-4 employee-1">
        <div class="employee">
          <div class="employee-image">
            <img src="http://www.pngonly.com/wp-content/uploads/2017/06/Man-Business-Transparent-PNG.png" class="img-fluid d-block m-auto" alt="employee-image">
            </div>
          <div class="employee-details">
            <div class="employee-name">
              <h1 class="text-center">Franklin<br><span class="employee-role">Tester</span></h1>
              </div>
            <div class="employee-social-link">
                <ul>
                  <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                  <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
                  <li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
                  <li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
                  <li><i class="fa fa-behance" aria-hidden="true"></i></li>
              </ul>
          </div>
          </div>
        </div>
        </div>
      </div>
    </div>
</div>
    </body>
</html>
body {
  margin:0;
  padding:0;
}
.employee-container {
  margin-top:80px;
}
.employee {
  width:100%;
  background-color:black;
  margin:10px auto;
  display:block;
  overflow:hidden;
  height:400px;
  border-radius:10px;
  -webkit-box-shadow: 0px 0px 31px -19px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 31px -19px rgba(0,0,0,0.75);
box-shadow: 0px 0px 31px -19px rgba(0,0,0,0.75);
}
.employee:hover > .employee-image {
  margin-top:-100px;
}
.employee-image {
  background-color:#fff;
  height:400px;
  width:100%;
  transition:0.5s;
}
.employee-image img {
  height:100%;
}
.employee-name {
  color:#fff;
  font-weight:bold;
  padding:5px;
}
.employee-name h1 {
  font-size:30px;
}
.employee-name span {
  font-size:20px;
  color:yellow;
  padding:0px;
}
.employee-social-link ul li {
  position:relative;
  bottom:-120px;
}
.employee-social-link ul{
  text-align:center;
  list-style:none;
}
.employee-social-link ul li {
  display:inline-block;
  margin:7px;
  background-color:#000;
  padding:10px;
  border-radius:50%;
  line-height:0.1;
  margin-left:-5px;
}
.employee-social-link i {
  font-size:15px;
  color:#fff;
  animation-name:rotate-icon;
}

.employee-social-link ul li:nth-child(1) {
  transition:1.0s;
}
.employee-social-link ul li:nth-child(2) {
  transition:1.3s;
}
.employee-social-link ul li:nth-child(3) {
  transition:1.6s;
}
.employee-social-link ul li:nth-child(4) {
  transition:1.9s;
}
.employee-social-link ul li:nth-child(5) {
  transition:2.2s;
}
.employee:hover > .employee-details .employee-social-link ul li{
  bottom:250px;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
  2. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.