"Team Section"
Bootstrap 3.3.0 Snippet by Ahsan25

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <section id="myteam" class="team"> <div class="container"> <div class="row"> </div> <div class="container"> <div class="row team-row"> <div class="col-md-4 col-sm-6 team-wrap"> <div class="team-member text-center"> <div class="team-img"> <img src="http://deothemes.com/envato/enigma/html/img/team_2.jpg" alt=""> <div class="overlay-team"> <div class="team-details text-center"> <div class="socials mt-20"> <a href="#"> <i class="fa fa-facebook"></i> </a> <a href="#"> <i class="fa fa-twitter"></i> </a> <a href="#"> <i class="fa fa-google-plus"></i> </a> <a href="#"> <i class="fa fa-envelope"></i> </a> </div> </div> </div> </div> <h6 class="team-title">Mustakim parvez</h6> <span>web devloper</span> </div> </div> <!-- end team member --> <div class="col-md-4 col-sm-6 team-wrap"> <div class="team-member text-center"> <div class="team-img"> <img src="http://deothemes.com/envato/enigma/html/img/team_3.jpg" alt=""> <div class="overlay-team"> <div class="team-details text-center"> <div class="socials mt-20"> <a href="#"> <i class="fa fa-facebook"></i> </a> <a href="#"> <i class="fa fa-twitter"></i> </a> <a href="#"> <i class="fa fa-google-plus"></i> </a> <a href="#"> <i class="fa fa-envelope"></i> </a> </div> </div> </div> </div> <h6 class="team-title">Aunto Apu</h6> <span>android devloper</span> </div> </div> <!-- end team member --> <div class="col-md-4 col-sm-6 team-wrap"> <div class="team-member last text-center"> <div class="team-img"> <img src="http://deothemes.com/envato/enigma/html/img/team_1.jpg" alt=""> <div class="overlay-team"> <div class="team-details text-center"> <div class="socials mt-20"> <a href="#"> <i class="fa fa-facebook"></i> </a> <a href="#"> <i class="fa fa-twitter"></i> </a> <a href="#"> <i class="fa fa-google-plus"></i> </a> <a href="#"> <i class="fa fa-envelope"></i> </a> </div> </div> </div> </div> <h6 class="team-title">Jagir Alam</h6> <span>Software engineer </span> </div> </div> <!-- end team member --> </div> </div> </div> </section>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,700i'); * { margin: 0; padding: 0; outline: 0; } ul, ol { list-style: none; font-family: 'Roboto', serif; } button { font-family: 'Roboto', serif; } p { font-family: 'Roboto', serif; } a { text-decoration: none; outline: 0; font-family: 'Roboto', serif; } a:hover, a:focus { border-color: transparent; text-decoration: none; outline: 0; } img { border: 0; } .clr { clear: both; } body { font-family: 'Roboto', sans-serif; } h1, h2, h3, h4, h5, h6, ol, ul, p, address, strong, i { margin: 0px; line-height: normal; font-family: 'Roboto', sans-serif; } .team { padding: 100px 0 40px; position: relative; } .our-team .team-row { margin-left: -40px; margin-right: -40px; } .our-team .team-wrap { padding: 0 40px; } .our-team .container-fluid { padding: 0 50px; } .team-img img { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; overflow: hidden; width: 100%; } .team-member, .team-img { position: relative; overflow: hidden; } .team-title { margin: 30px 0 7px; font-size: 20px; font-weight: 700; color: #000000; text-transform: uppercase; } .team-member span { font-size: 16px; color: #444444; font-weight: 400; text-transform: capitalize; } .overlay-team { background-color: rgba(20, 20, 20, .7); position: absolute; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .team-details { opacity: 0; position: absolute; top: 50%; left: 0; padding: 5%; overflow: hidden; width: 100%; z-index: 2; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .team-img:hover .team-details { opacity: 1; margin-top: -80px; } .team-img:hover .overlay-team { opacity: 1; } .team-member:hover h6 { color: #002147; font-weight: bold; } .socials a { display: inline-block; margin-top: 40px; margin-right: 5px; } .socials a i { color: #fff; font-size: 18px; display: block; width: 42px; height: 42px; border-radius: 50%; line-height: 44px; text-align: center; transition: all .3s ease 0s; background: rgba(255, 255, 255, 0.5); } .team-details .socials i { color: #fff; } .socials a:hover i { color: #fff; background: #fec722; }

Related: See More


Questions / Comments: