new team members

This bootstrap snippet called "new team members" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: users,thumbnails

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<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="https://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="https://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="https://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="https://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="https://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="https://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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


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;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Aug 17th 2015, 21:17

Views: 2.8K

Rated 5/5 based on 1 reviews