<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 ----------> <section class="team"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="center-heading mb-5"> </div> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" data-aos="fade-right"> <div class="team-contant text-center spacing"> <div class="team-member"> <img class="rounded" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTZ8fG1hbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="team"> </div> <div class="detail"> <h5>deo smith</h5> <p><em>Senior Manager</em></p> <ul class="social-icon list-inline my-3"> <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" data-aos="fade-up"> <div class="team-contant text-center down spacing"> <div class="team-member"> <img class="rounded" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8bWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="team"> </div> <div class="detail"> <h5>deo smith</h5> <p><em>Senior Manager</em></p> <ul class="social-icon list-inline my-3"> <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12" data-aos="fade-left"> <div class="team-contant text-center spacing"> <div class="team-member"> <img class="rounded" src="https://images.unsplash.com/photo-1605462863863-10d9e47e15ee?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTAxfHxtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="team"> </div> <div class="detail"> <h5>deo smith</h5> <p><em>Senior Manager</em></p> <ul class="social-icon list-inline my-3"> <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fab fa-google-plus-g"></i></a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center mt-5"> <h5>Create by <a href="top10theme.com">top10theme</a></h5> </div> </div> </div> </section>

.team{padding: 100px 0px;} .team-contant{ position: relative; width: 100%; cursor: pointer; transition: all 0.4s; border-bottom: 2px solid #c5c5c5; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .team-contant:hover{transform: translateY(-3%); opacity: 0.8;} .down{transform: translateY(5%); } .team-member{height: 260px; width: 100%;} .team-member img{ height: 100%; width: 100%; box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); } .team-contant .detail h5{margin: 25px 0px 8px;} .social-icon li i{ height: 30px; width: 30px; padding: 0; font-size: 12px; overflow: hidden; background: #8d19e5; background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2); background: linear-gradient(to right, #4A00E0, #8E2DE2); line-height: 30px; color: #ffffff; border-radius: 50%;}