new team members

Bootstrap snippet. new team members, this snippet 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

HTML code

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


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

CSS code

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


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

Similar snippets

Bootstrap snippet social network profile head

social network profile head

View

Bootstrap snippet bs4 crud users

bs4 crud users

View

Bootstrap snippet Most Recent Signups panel

Most Recent Signups panel

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Aug 17th 2015, 21:17

Views: 3.0K

Rated 5/5 based on 2 reviews