<div class="team-grid">
<div class="container">
<div class="intro">
<h2 class="text-center">Meet Our Team</h2>
<p class="text-center">A Bootstrap 4 example layout with an Meet our team section and team members</p>
</div>
<div class="row people d-flex justify-content-center">
<div class="col-md-4 col-lg-3 item">
<div class="box" style="background-image:url(https://i.imgur.com/HjKTNkG.jpg)">
<div class="cover">
<h3 class="name">Tim Cook</h3>
<p class="title">Android Developer</p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 item">
<div class="box" style="background-image:url(https://i.imgur.com/WgXRMDs.jpg)">
<div class="cover">
<h3 class="name">Michael Clarke</h3>
<p class="title">Cricker</p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-3 item">
<div class="box" style="background-image:url(https://i.imgur.com/0Cdlenp.jpg)">
<div class="cover">
<h3 class="name">Carlos vento</h3>
<p class="title">Business Analyst</p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-image: linear-gradient(#3F51B5, #1A237E);
background-repeat: no-repeat;
color: #000;
overflow-x: hidden
}
p {
color: #fff
}
h2 {
font-weight: bold;
margin-bottom: 40px;
padding-top: 40px;
color: #fff
}
@media (max-width:767px) {
h2 {
margin-bottom: 25px;
padding-top: 25px;
font-size: 24px
}
}
.intro {
font-size: 16px;
max-width: 500px;
margin: 0 auto
}
.intro p {
margin-bottom: 0
}
.people {
padding: 50px 0;
cursor: pointer
}
.item {
margin-bottom: 30px
}
.item .box {
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 280px;
position: relative;
overflow: hidden
}
.item .cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(31, 148, 255, 0.75);
transition: opacity 0.15s ease-in;
opacity: 0;
padding-top: 80px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15)
}
.item:hover .cover {
opacity: 1
}
.item .name {
font-weight: bold;
margin-bottom: 8px
}
.item .title {
text-transform: uppercase;
font-weight: bold;
color: #bbd8fb;
letter-spacing: 2px;
font-size: 13px;
margin-bottom: 20px
}
.social {
font-size: 18px
}
.social a {
color: inherit;
margin: 0 10px;
display: inline-block;
opacity: 0.7
}
.social a:hover {
opacity: 1
}