Bootstrap snippet: new team members

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,thumbnails



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <h4 class="h-title"> New team members </h4> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#" class="thumb-zoom" title="Eugene A. Kopyov"> <img src="http://lorempixel.com/300/300/people/1/" alt=""> </a> <div class="caption text-center"> <h6>Eugene A. Kopyov <small>UX designer</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#g" class="thumb-zoom" title="Sophia R. McJamer"> <img src="http://lorempixel.com/300/300/people/6/" alt=""> </a> <div class="caption text-center"> <h6>Sophia R. McJamer <small>Media designer</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#" class="thumb-zoom" title="Noah Kennedy"> <img src="http://lorempixel.com/300/300/people/9/" alt=""> </a> <div class="caption text-center"> <h6>Noah Kennedy <small>CEO &amp; founder</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#" class="thumb-zoom" title="Noah Kennedy"> <img src="http://lorempixel.com/300/300/people/2/" alt=""> </a> <div class="caption text-center"> <h6>Noah Kennedy <small>CEO &amp; founder</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#" class="thumb-zoom" title="Noah Kennedy"> <img src="http://lorempixel.com/300/300/people/7/" alt=""> </a> <div class="caption text-center"> <h6>Noah Kennedy <small>CEO &amp; founder</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="block"> <div class="thumbnail"> <a href="#" class="thumb-zoom" title="Noah Kennedy"> <img src="http://lorempixel.com/300/300/people/5/" alt=""> </a> <div class="caption text-center"> <h6>Noah Kennedy <small>CEO &amp; founder</small></h6> <div class="icons-group"> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#" ><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; } .h-title{ border-bottom:1px solid #eee; padding-bottom:5px; } .block { margin-bottom: 35px; } .thumbnail { background: none; position: relative; border: 0; padding: 0; margin-bottom: 0; text-align: center; } .thumbnail .caption { padding: 12px 0 0 0; color: #333; } .thumbnail .caption h6 small { display: block; margin-top: 4px; } .thumbnail .caption h6, .thumbnail .caption .h6 { font-size: 14px; } .icons-group a { color: #555; } .thumb-zoom img:hover { opacity: 0.7; cursor: pointer; border-radius: 0px; -webkit-transform: scale(1.2, 1.2); -webkit-transition-timing-function: ease-out; -moz-transform: scale(1.2, 1.2); -moz-transition-timing-function: ease-out; -ms-transform: scale(1.20, 1.20); -ms-transition-timing-function: ease-out; -webkit-transition-duration: 500ms; -moz-transition-duration: 500ms; -ms-transition-duration: 500ms; }
Dey-Dey

new team members

Dey-Dey
  Jan 6th, 08:56
1.4K Views