Bootstrap 4 Our Team Section Example

Bootstrap 4 our team section source code we can use for our clients, customers, testimonials, and any type of section where we want to describe the people who are working with us.

HTML

<!-- Our Team Section -->
<section class="our-team">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h2>Our Team Section</h2>
                <p>Bootstrap 4 our team section source code we can use it for our clients, customers, testimonials, and any types of the section where we want to describe our people who are working with us</p>
            </div>
        </div>
        <hr class="mb-5 mt-4">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="member">
                    <img src="images/user-img-2.jpg" class="img-fluid" alt="" />
                    <div class="member-info">
                        <div class="member-detail">
                            <h4>Manish Kumar</h4>
                            <span>Web Designer</span>
                        </div>
                        <div class="social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="member">
                    <img src="images/user-img-3.jpg" class="img-fluid" alt="" />
                    <div class="member-info">
                        <div class="member-detail">
                            <h4>Rajnish Kumar</h4>
                            <span>Web Developer</span>
                        </div>
                        <div class="social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="member">
                    <img src="images/user-img-4.jpg" class="img-fluid" alt="" />
                    <div class="member-info">
                        <div class="member-detail">
                            <h4>Salim Malik</h4>
                            <span>IOS Developer</span>
                        </div>
                        <div class="social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="member">
                    <img src="images/user-img-1.jpg" class="img-fluid" alt="" />
                    <div class="member-info">
                        <div class="member-detail">
                            <h4>Arpit Arora</h4>
                            <span>Angular Developer</span>
                        </div>
                        <div class="social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr class="mt-5">
    </div>
</section>
<!-- End Our Team Section -->

CSS

section.our-team {
    padding: 70px 0px;
    background-color: #f2f9ff;
    text-align: center;
    color: #fff;
}
.our-team .member {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    transition: 0.4s;
    border-radius: 100%;
    border: 6px solid #ffffff;
}
.our-team h2 {
    font-size: 36px;
    color: #795548;
    font-weight: normal;
}
.our-team p {
    color: #9e9e9e;
    width: 70%;
    margin: 10px auto 10px;
}
.our-team .member:hover {
    box-shadow: 0px 10px 0px 0px #795548;
}
.our-team .member .member-info {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
}
.our-team .member .member-detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
}
.our-team .member .social {
    position: absolute;
    left: 0;
    bottom: -38px;
    right: 0;
    height: 48px;
    transition: bottom ease-in-out 0.4s;
    text-align: center;
}
.our-team .member .social a {
    margin: 0 10px;
    display: inline-block;
    color: #fff;
}
.our-team .member .social a:hover {
    color: #cda45e;
}
.our-team .member .social i {
    font-size: 18px;
    margin: 0 2px;
}
.our-team .member:hover .member-info {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.83) 0%, rgba(0, 0, 0, 0.57) 20%, rgba(121, 85, 72, 0.09) 100%);
    opacity: 1;
    transition: 0.4s;
}
.our-team .member:hover .member-detail {
    bottom: 80px;
}
.our-team .member:hover .social {
    bottom: 10px;
}