<div class="ourTeam">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="single-team">
<div class="img-wrapper"><img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/6.jpg" alt=""></div>
<div class="txt">
<h5>Nour Smith</h5>
<span>CEO & Founder</span> </div>
<div class="social-links">
<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-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="single-team">
<div class="img-wrapper"><img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/3.jpg" alt=""></div>
<div class="txt">
<h5>Jay Williams</h5>
<span>CEO & Founder</span> </div>
<div class="social-links">
<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-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="single-team">
<div class="img-wrapper"><img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/4.jpg" alt=""></div>
<div class="txt">
<h5>Phonex</h5>
<span>CEO & Founder</span> </div>
<div class="social-links">
<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-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="single-team">
<div class="img-wrapper"><img src="https://www.tolmatol.com/uploads-images/bootrap-snippets-our-team/5.jpg" alt=""></div>
<div class="txt">
<h5>Smith</h5>
<span>CEO & Founder</span> </div>
<div class="social-links">
<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-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.ourTeam {
padding: 111px 0px 165px;
}
.ourTeam .section-title h2 {
text-transform: uppercase;
color: #333333;
}
.ourTeam .section-title span {
color: #797e82;
}
.ourTeam .single-team {
position: relative;
}
.ourTeam .single-team::before {
position: absolute;
content: "";
background-color: #333333;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
z-index: 3;
-webkit-transition: .5s;
transition: .5s;
}
.ourTeam .single-team:hover::before {
visibility: visible;
opacity: .4;
}
.ourTeam .single-team .social-links {
position: absolute;
top: 50%;
left: 0;
height: auto;
width: 100%;
z-index: 5;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.ourTeam .single-team .social-links ul {
padding: 0px;
list-style: none;
width: 100%;
text-align: center;
}
.ourTeam .single-team .social-links ul li {
display: inline-block;
margin-right: 8px;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(-20px) rotate(-180deg);
transform: translateX(-20px) rotate(-180deg);
-webkit-transition: 1s;
transition: 1s;
}
.ourTeam .single-team:hover .social-links ul li {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
.ourTeam .single-team .social-links ul li a {
color: #fff;
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #6f0ac8;
border: 1px solid #6f0ac8;
line-height: 40px;
font-size: 20px;
-webkit-transition: .5s;
transition: .5s;
}
.ourTeam .single-team .social-links ul li a:hover {
background-color: #fff;
color: #6f0ac8;
}
.ourTeam .single-team .img-wrapper {
overflow: hidden;
}
.ourTeam .single-team img {
width: 100%;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: .5s;
transition: .5s;
}
.ourTeam .single-team:hover img {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.ourTeam .single-team .txt {
position: absolute;
bottom: 0;
z-index: 10;
padding: 21px 0px 16px;
background-color: #fff;
width: 80%;
left: 50%;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
text-align: center;
-webkit-box-shadow: 0px 24px 18px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 24px 18px 0px rgba(0, 0, 0, 0.05);
-webkit-transition: .5s;
transition: .5s;
}
.ourTeam .single-team:hover .txt {
width: 100%;
background-color: #6f0ac8;
color: #fff;
-webkit-box-shadow: 0px;
box-shadow: 0px;
}
.ourTeam .single-team .txt h5 {
font-size: 18px;
text-transform: uppercase;
font-weight: 700;
color: #333333;
margin: 0px;
-webkit-transition: .5s;
transition: .5s;
}
.ourTeam .single-team:hover .txt h5 {
color: #fff;
}
.ourTeam .single-team .txt span {
text-transform: uppercase;
font-size: 14px;
}
</style>