<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;
box-shadow: 0px 0px 31px -19px rgba(0,0,0,0.75);
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;
}
This Pen doesn't use any external JavaScript resources.