<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link src="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title title-center">OUR MANAGEMENT <span>TEAM</span></h2>
</div>
<div class="col-md-3 col-sm-6">
<div class="team">
<div class="team-image">
<img src="https://via.placeholder.com/243x300" class="img-responsive" alt="team image">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
<h3>Dwayne Johnson</h3>
<p>CEO / FOUNDER EVENTO</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team">
<div class="team-image">
<img src="https://via.placeholder.com/243x300" class="img-responsive" alt="team image">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
<h3>Dwayne Johnson</h3>
<p>CEO / FOUNDER EVENTO</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team">
<div class="team-image">
<img src="https://via.placeholder.com/243x300" class="img-responsive" alt="team image">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
<h3>Dwayne Johnson</h3>
<p>CEO / FOUNDER EVENTO</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="team">
<div class="team-image">
<img src="https://via.placeholder.com/243x300" class="img-responsive" alt="team image">
<div class="social-icons">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
</div>
</div>
<h3>Dwayne Johnson</h3>
<p>CEO / FOUNDER EVENTO</p>
</div>
</div>
</div>
</div>
a,
i,
.fa,
.btn,
.btn:hover,
a:hover,
a:focus,
.transition,
#back-to-top:hover,
.title2:hover:after,
.title2:after
{
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.team {
max-width: 243px;
margin: 45px auto 0px;
padding: 0px 10px;
}
.team h3 {
font-size: 16px;
text-transform: uppercase;
color: #e60e63;
margin-top: 15px;
margin-bottom: 10px;
}
.team p {
font-weight: 500;
font-size: 12px;
}
.team-image {
position: relative;
overflow: hidden;
border-radius: 4px;
}
.team-image img {
max-width: 223px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.team-image .social-icons {
position: absolute;
bottom: -22%;
width: 100%;
text-align: center;
background: -webkit-linear-gradient(-45deg, rgba(230,14,99,.9) 0%,rgba(209,36,146,.9) 100%);
background: linear-gradient(135deg, rgba(230,14,99,.9) 0%,rgba(209,36,146,.9) 100%);
padding: 10px 0px 5px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.team-image .social-icons a {
display: inline-block;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #fff;
position: relative;
margin-right: 2px;
bottom: 0px;
}
.team-image .social-icons a i {
font-size: 18px;
position: absolute;
top: 51%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.team-image .social-icons a:hover i {
color: #b60b4e;
}
.team-image:hover .social-icons {
bottom: 0%;
}
.team-image:hover img {
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-image .social-icons a:hover {
bottom: 5px;
}
