Portfolio filter

This bootstrap snippet called "Portfolio filter" 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: portfolio,list,bootstrap,snippet,images,3.2.0,container

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 rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container bootstrap snippet">
    <h1 class="text-center section-title">Our Portfolio</h1>
    <hr>
    <section id="portfolio" class="gray-bg padding-top-bottom">    
		<div class="container bootstrap snippet">
			<!--==== Portfolio Filters ====-->
			<div class="categories">
				<ul>
					<li class="active">
						<a href="#" data-filter="*">All Categories</a>
					</li>
					<li>
						<a href="#" data-filter=".web-design">Web Design</a>
					</li>
					<li>
						<a href="#" data-filter=".apps">Apps</a>
					</li>
					<li>
						<a href="#" data-filter=".psd">PSD</a>
					</li>
				</ul>
			</div>
			
			<!-- ======= Portfolio items ===-->
			<div class="projects-container scrollimation in">
				<div class="row">
					<article class="col-md-4 col-sm-6 portfolio-item web-design apps psd">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/nature/2" alt="">
								<h2 class="project-title">Billing</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="enlarge cboxElement" href="#" title="Bills Project"><i class="fa fa-expand fa-fw"></i></a>
							<a class="link" href="#"><i class="fa fa-eye fa-fw"></i></a>
						</div>
					</article>

					<article class="col-md-4 col-sm-6 portfolio-item apps">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/fashion/4" alt="">
								<h2 class="project-title">Augmented Tourist</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="link centered" href=""><i class="fa fa-eye fa-fw"></i></a>
						</div>
					</article>
					
					<article class="col-md-4 col-sm-6 portfolio-item web-design psd">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/city/2" alt="">
								<h2 class="project-title">Get Colored</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="enlarge centered cboxElement" href="#" title="Get Colored"><i class="fa fa-expand fa-fw"></i></a>
						</div>
					</article>
					
					<article class="col-md-4 col-sm-6 portfolio-item apps">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/cats/4" alt="">
								<h2 class="project-title">Holiday Selector</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="enlarge cboxElement" href="#" title="Holiday Selector"><i class="fa fa-expand fa-fw"></i></a>
							<a class="link" href="#"><i class="fa fa-eye fa-fw"></i></a>
						</div>
					</article>
					
					<article class="col-md-4 col-sm-6 portfolio-item web-design psd">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/technics/3" alt="">
								<h2 class="project-title">Scavenger Hunt</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="enlarge cboxElement" href="#" title="Scavenger Hunt"><i class="fa fa-expand fa-fw"></i></a>
							<a class="link" href="#"><i class="fa fa-eye fa-fw"></i></a>
						</div>
					</article>
					
					<article class="col-md-4 col-sm-6 portfolio-item web-design apps">
						<div class="portfolio-thumb in">
							<a href="#" class="main-link">
								<img class="img-responsive img-center" src="https://lorempixel.com/400/300/nightlife/4" alt="">
								<h2 class="project-title">Sonor</h2>
								<span class="overlay-mask"></span>
							</a>
							<a class="enlarge cboxElement" href="#" title="Sonor"><i class="fa fa-expand fa-fw"></i></a>
							<a class="link" href="#"><i class="fa fa-eye fa-fw"></i></a>
						</div>
					</article>
				</div>
			</div>
		</div>	
	</section>
</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{
    background: #f3f3f3;  
}

.categories ul {
    list-style:none;
    padding:0;
    margin:0;
    margin-bottom:20px;
    text-align:center;
    
}

.categories ul li{
    display:inline-block;
    padding:0;
    line-height:24px;
    background:transparent;
    margin:0;
    margin-left:5px;
    margin-bottom:10px;
}

.categories ul li a{
    display:block;
    font-size:18px;
    font-weight:500;
    padding:10px 20px;
    border-radius:5px;
    border:2px solid transparent;
    -webkit-transition:all .2s ease-out;
    transition:all .2s ease-out;
}

.categories ul li a,
.categories ul li a:active,
.categories ul li a:hover{
    line-height:24px;
    background:#fff;
    color:#4E5961;
    text-decoration:none;
}

.categories ul li a:hover,
.categories ul li.active a{
    color:#fff;
    background:#5cc9df;
}

.projects-container .row{
    -webkit-transition:height .5s ease-out;
    transition:height .5s ease-out;
}

.portfolio-item {
    position:relative;
	margin-bottom:30px;
	-webkit-transform:scale(1);
	transform:scale(1);
	opacity:1;
	-webkit-transition:all .4s ease-out;
	transition:all .4s ease-out;
}

.portfolio-item.filtered {
	-webkit-transform:scale(0.5);
	transform:scale(0.5);
	opacity:0.2;
	cursor:default;
}

.no-opacity .portfolio-item.filtered {
	display:none;
}

.portfolio-item.filtered a{
	cursor:default;
}

.portfolio-item.filtered .enlarge,
.portfolio-item.filtered .link,
.portfolio-item.filtered .overlay-mask,
.portfolio-item.filtered .project-title{
    display:none;
}

.portfolio-thumb {
    display:block;
    position:relative;
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
    overflow:hidden;
}

.scrollimation .portfolio-thumb {
	-webkit-transform:translateY(100px);
	transform:translateY(100px);
	opacity:0;
	-webkit-transition:opacity .4s ease-out, -webkit-transform .4s ease-out;
	transition:opacity .4s ease-out, transform .4s ease-out;
}

.touch .scrollimation .portfolio-thumb,
.scrollimation .portfolio-thumb.in {
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
	opacity:1;
}

.portfolio-thumb .overlay-mask{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#5CC9DF;
    opacity:0;
	filter:alpha(opacity=0);
    z-index:1;
    -webkit-transition:opacity .3s ease-out;
    transition:opacity .3s ease-out;
}


.portfolio-thumb:hover .overlay-mask {
    opacity:0.8;
	filter:alpha(opacity=80);
}

.portfolio-thumb .enlarge,
.portfolio-thumb .link{
    display:inline-block;
    margin:0;
    margin-top:-25px;
    font-size:50px;
    line-height:50px;
    color:#fff;
    opacity:0;
	filter:alpha(opacity=0);
    position:absolute;
    height:50px;
    width:64px;
    top:40%;
    left:50%;
    text-align:center;
    z-index:3;

}

.portfolio-thumb .enlarge{
    margin-left:-84px;
    -webkit-transform:translateX(-200px);
    transform:translateX(-200px);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.portfolio-thumb:hover .enlarge{
    -webkit-transform:translateX(0);
    transform:translateX(0);
    opacity:1;
	filter:alpha(opacity=100);
    -webkit-transition:all .3s ease-out .3s;
    transition:all .3s ease-out .3s;
}

.portfolio-thumb .link{
    margin-left:20px;
    -webkit-transform:translateX(200px);
    transform:translateX(200px);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.portfolio-thumb:hover .link{
    -webkit-transform:translate(0);
    transform:translate(0);
    opacity:1;
	filter:alpha(opacity=100);
    -webkit-transition:all .3s ease-out .6s;
    transition:all .3s ease-out .6s;
}

.portfolio-thumb .enlarge.centered,
.portfolio-thumb .link.centered{
    margin-left:-32px;
    -webkit-transform:translateY(-200px);
    transform:translateY(-200px);
    -webkit-transition-delay:0s;
    transition-delay:0s;
}

.portfolio-thumb:hover .enlarge.centered,
.portfolio-thumb:hover .link.centered{
    -webkit-transform:translateY(0);
    transform:translateY(0);
    -webkit-transition-delay:0.3s;
    transition-delay:0.3s;
}

.portfolio-thumb .project-title {
    display:block;
    width:100%;
    position:absolute;
    bottom:-100px;
    background:#fff;
    margin:0;
    padding:20px 0;
    font-size:21px;
    font-weight:300;
    color:#777;
    text-align:center;
    z-index:2;
    -webkit-transition:bottom .4s ease-out,color .2s ease-out;
    transition:bottom .4s ease-out,color .2s ease-out;
}

.portfolio-thumb:hover .project-title {
    bottom:0;
    -webkit-transition:bottom .3s ease-out .1s,color .2s ease-out 0s;
    transition:bottom .3s ease-out .1s,color .2s ease-out 0s;
}

.portfolio-thumb .project-title:hover {
    color:#5CC9DF;
}  
                                    

This is the JS code for this bootstrap snippet

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

$(function(){
    $('.categories a').click(function(e){
    	$('.categories ul li').removeClass('active');
    	$(this).parent('li').addClass('active');
    	var itemSelected = $(this).attr('data-filter');
    	$('.portfolio-item').each(function(){
    		if (itemSelected == '*'){
    			$(this).removeClass('filtered').removeClass('selected');
    			return;
    		} else if($(this).is(itemSelected)){
    			$(this).removeClass('filtered').addClass('selected');
    		} else{
    			$(this).removeClass('selected').addClass('filtered');
    		}
    	});
    });
}); 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 20th 2014, 23:30

Views: 19.3K

Rated 5/5 based on 2 reviews