Bootstrap snippet: meet our team with hover effect

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: users



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="section ourTeam"> <header class="text-center"> <h2>Meet <strong>Our Team</strong></h2> </header> <div class="row"> <div class="col-xs-6 col-sm-4 col-md-3 i"> <div class="c text-center"> <div class="wrap"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="#" width="270" height="270" class="img-responsive"> <div class="info"> <h3 class="name">John Doe</h3> <h4 class="position">Chief Executive Officer</h4> </div> </div> <div class="more"> <p>Ut sed consectetur ligula. Aenean id nibh accumsan, pre tium nulla in, lacinia aecenas mollis. Sed mauris at sollicitudin. Etiam maximus mauris vel leo mattis, non venenatis magna finibus vestibulum.</p> <div class="socials"> <a href="#" title="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" title="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" title="#" class="google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" title="#" class="linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 i"> <div class="c text-center"> <div class="wrap"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="#" width="270" height="270" class="img-responsive"> <div class="info"> <h3 class="name">Elizabeth Doe</h3> <h4 class="position">Marketing Specialist</h4> </div> </div> <div class="more"> <p>Ut sed consectetur ligula. Aenean id nibh accumsan, pre tium nulla in, lacinia aecenas mollis. Sed mauris at sollicitudin. Etiam maximus mauris vel leo mattis, non venenatis magna finibus vestibulum.</p> <div class="socials"> <a href="#" title="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" title="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" title="#" class="google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" title="#" class="linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 i"> <div class="c text-center"> <div class="wrap"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="#" width="270" height="270" class="img-responsive"> <div class="info"> <h3 class="name">Doug Doe</h3> <h4 class="position">Head of Support</h4> </div> </div> <div class="more"> <p>Ut sed consectetur ligula. Aenean id nibh accumsan, pre tium nulla in, lacinia aecenas mollis. Sed mauris at sollicitudin. Etiam maximus mauris vel leo mattis, non venenatis magna finibus vestibulum.</p> <div class="socials"> <a href="#" title="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" title="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" title="#" class="google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" title="#" class="linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> <div class="col-xs-6 col-sm-4 col-md-3 i"> <div class="c text-center"> <div class="wrap"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="#" width="270" height="270" class="img-responsive"> <div class="info"> <h3 class="name">Fabricio Doe</h3> <h4 class="position">Chief Technical Officer</h4> </div> </div> <div class="more"> <p>Ut sed consectetur ligula. Aenean id nibh accumsan, pre tium nulla in, lacinia aecenas mollis. Sed mauris at sollicitudin. Etiam maximus mauris vel leo mattis, non venenatis magna finibus vestibulum.</p> <div class="socials"> <a href="#" title="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" title="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" title="#" class="google-plus"><i class="fa fa-google-plus"></i></a> <a href="#" title="#" class="linkedin"><i class="fa fa-linkedin"></i></a> </div> </div> </div> </div> </div> </div>
body{margin-top:20px;} .ourTeam { background: #319ac6; height:800px; } .ourTeam h2 { color: #fff; margin: 0 0 30px 0 } .ourTeam .i { margin-top: 30px } .ourTeam .i .c { background: #fff; -webkit-box-shadow: 0 4px 0 #2b86ac; -moz-box-shadow: 0 4px 0 #2b86ac; box-shadow: 0 4px 0 #2b86ac; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; position: relative; overflow: hidden; padding-bottom: 110px } .ourTeam .i .c .wrap { position: relative } .ourTeam .i .c .wrap img { width: 100%; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease } .ourTeam .i .c .wrap .info { padding: 30px 0; position: absolute; top: 100%; width: 100%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease } .ourTeam .i .c .wrap .info .name { margin: 0; font-size: 24px; font-size: 2.4rem; font-weight: 700; margin: 0 0 8px 0 } .ourTeam .i .c .wrap .info .position { margin: 0; font-size: 14px; font-size: 1.4rem; color: #555659 } .ourTeam .i .c .more { position: absolute; bottom: -100%; width: 100%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease } .ourTeam .i .c .more p { margin: 0 18px 30px 18px; line-height: 22px } .ourTeam .i .c .more .socials { margin: 0 0 20px 0 } .ourTeam .i .c .more .socials a { display: inline-block; width: 40px; height: 40px; line-height: 40px; font-size: 22px; font-size: 2.2rem; color: #fff; margin: 0 0 0 3px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-align: center; -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, .1); box-shadow: 0 3px 0 rgba(0, 0, 0, .1) } .ourTeam .i .c .more .socials a:first-child { margin: 0 } .ourTeam .i .c .more .socials a.facebook { background: #3262b9 } .ourTeam .i .c .more .socials a.facebook:hover { background: #2d57a5 } .ourTeam .i .c .more .socials a.twitter { background: #3dd7e5 } .ourTeam .i .c .more .socials a.twitter:hover { background: #27d2e2 } .ourTeam .i .c .more .socials a.google-plus { background: #e23535 } .ourTeam .i .c .more .socials a.google-plus:hover { background: #de2020 } .ourTeam .i .c .more .socials a.linkedin { background: #069 } .ourTeam .i .c .more .socials a.linkedin:hover { background: #005580 } .ourTeam .i .c:hover img { -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; opacity: 0 } .ourTeam .i .c:hover .info { top: 0 } .ourTeam .i .c:hover .more { bottom: 0 }
Dey-Dey

meet our team with hover effect

Dey-Dey
  Sep 7th, 08:17
1.2K Views