"Team CSS3 Animated Block"
Bootstrap 3.3.0 Snippet by JoeEarly

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container content"> <div class="heading"> <h2>Our <strong>Great Team</strong></h2> <p>To try the most advanced business</p> </div><!-- //end heading --> <div class="row"> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member1.png" alt=""> </div> <div class="team-desc"> <h4>John Doe</h4> <span>Marketing</span> </div> </div> </div> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member2.png" alt=""> </div> <div class="team-desc"> <h4>Melisa Doe</h4> <span>Founder</span> </div> </div> </div> <div class="col-sm-4"> <div class="team-members"> <div class="team-avatar"> <img class="img-responsive" src="http://keenthemes.com/assets/bootsnipp/member3.png" alt=""> </div> <div class="team-desc"> <h4>Alex Atkinson</h4> <span>Director</span> </div> </div> </div> </div><!-- //end row --> </div> <br> <br> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>
/*** Bootstrap Line Tabs by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ .content { padding-top: 30px; } /* Heading */ .heading { z-index: 1; position: relative; text-align: center; margin-bottom: 100px; } .heading:after { left: 50%; height: 3px; width: 50px; content: " "; bottom: -35px; margin-left: -25px; position: absolute; background: #444; } .heading h2 { font-size: 40px; font-weight: 500; margin: 0 0 20px; color: #444; } .heading p { font-size: 16px; font-weight: 300; letter-spacing: 0.5px; text-transform: uppercase; color: #8693a7; } /* Team Members */ .team-members { width: 100%; cursor: pointer; overflow: hidden; position: relative; margin-bottom: 35px; } .team-members .team-avatar { position: relative; } .team-members .team-avatar:after { top: 0; left: 0; width: 100%; height: 100%; content: " "; position: absolute; background: rgba(129, 129, 129, 0.1); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members .team-avatar img { display: block; margin: 0 auto; text-align: center; } .team-members .team-desc { left: auto; bottom: 0; width: 100%; padding: 0 20px; position: absolute; opacity: 0; color: #fff; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .team-members .team-desc h4 { font-size: 22px; font-weight: 600; margin: 0 0 10px; color: #fff; } .team-members .team-desc span { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #fff; } .team-members:hover .team-avatar:after { background: rgba(47, 60, 72, 0.5); transition-duration: 300ms; transition-property: all; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .team-members:hover .team-desc { -webkit-transform: translate3d(0, -5%, 0); transform: translate3d(0, -5%, 0); -webkit-transform: translate3d(0, -10%, 0); transform: translate3d(0, -10%, 0); } .team-members:hover .team-desc { opacity: 1; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }

Related: See More


Questions / Comments: