Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

Create A Simple Responsive Portfolio Page with Filtering and Hover Effect


Create A Simple Responsive Portfolio Page with Filtering and Hover Effect

In this tutorial, I'm going to show you how to create portfolio page with filtering and also hover effect for each of your project item. We will be using a CSS3 and jQuery filter & sort plugin called MixItUp.

This script should work pretty well with our previously published tutorial - display images with shape masking and nifty zoom effect.

Alright, lets get it started. First of all this is the screenshot of what we are about to build:

Based on the layout there are two main UI elements we need to build - Tab navigation for filtering and a grid of portfolio with hover effect. After that we will hook it up with MixItOut and our custom hover script.

HTML

First of all, we have the HTML markup for Tab navigation. It's a UL list with data filter. data-filter is included because MixItUp needs it for its filtering.

<ul id="filters" class="clearfix">
	<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
	<li><span class="filter" data-filter="app">App</span></li>
	<li><span class="filter" data-filter="card">Card</span></li>
	<li><span class="filter" data-filter="icon">Icon</span></li>
	<li><span class="filter" data-filter="logo">Logo</span></li>
	<li><span class="filter" data-filter="web">Web</span></li>
</ul>

Under the Tab navigation, we have portfolio list. We need to assign each portfolio a category in data-cat attribute. By matching data-filter with data-cat, this is how MixItUp filters portfolios.

Other than that, we added label and hide it by default. We will show it on mouse hover.

<div id="portfoliolist">		
	<div class="portfolio logo" data-cat="logo">
		<div class="portfolio-wrapper">				
			<img src="img/portfolios/logo/5.jpg" alt="" />
			<div class="label">
				<div class="label-text">
					<a class="text-title">Bird Document</a>
					<span class="text-category">Logo</span>
				</div>
				<div class="label-bg"></div>
			</div>
		</div>
	</div>			
	.........
</div>

CSS

We divided CSS into two parts - general styling for UI elements and responsive.

.container { 
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	/* You can see the purpose of transition by resizing the window.	*/
	-webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;	
}
 
#filters {
	margin:1%;
	padding:0;
	list-style:none;
}

	#filters li {
		float:left;
	}
	
	#filters li span {
		display: block;
		padding:5px 20px;		
		text-decoration:none;
		color:#666;
		cursor: pointer;
	}
	
	#filters li span.active {
		background: #e95a44;
		color:#fff;
	}
 
 
#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:23%;
	margin:1%;
	display:none;
	float:left;
	overflow:hidden;
}

	.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		background: #666;
		cursor:pointer;
	}

	.portfolio img {
		max-width:100%;
		position: relative;
	}
	
	//hide its label by default
	.portfolio .label {
		position: absolute;
		width: 100%;
		height:40px;
		bottom:-40px;
	}

		.portfolio .label-bg {
			background: #e95a44;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
		}
	
		.portfolio .label-text {
			color:#fff;
			position: relative;
			z-index:500;
			padding:5px 8px;
		}
			
			.portfolio .text-category {
				display:block;
				font-size:9px;
			}
	

A simple responsive layout to make sure the grid display properly in different window dimension.

/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		width: 768px; 
	}
}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.container { 
		width: 95%; 
	}
	
	#portfoliolist .portfolio {
		width:48%;
		margin:1%;
	}		

	#ads {
		display:none;
	}
	
}

/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 70%;
	}
	
	#ads {
		display:none;
	}
	
}

Javascript

Lastly, we have the Javascript. You can change its setting by visiting its documentation. Also, you can adjust the animation setting in hoverEffect function.

$(function () {
	
	var filterList = {
	
		init: function () {
		
			// MixItUp plugin
			// http://mixitup.io
			$('#portfoliolist').mixitup({
				targetSelector: '.portfolio',
				filterSelector: '.filter',
				effects: ['fade'],
				easing: 'snap',
				// call the hover effect
				onMixEnd: filterList.hoverEffect()
			});				
		
		},
		
		hoverEffect: function () {
		
			// Simple parallax effect
			$('#portfoliolist .portfolio').hover(
				function () {
					$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
					$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
				},
				function () {
					$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
					$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
				}		
			);				
		
		}

	};
	
	// Run the show!
	filterList.init();
	
});		

Conclusion

Nowadays, designers tend to cut down the clutters and keep everything simple. With this tutorial, we created a simple filtering portfolio page with hover effect. Sometimes we don't have to reinvent the wheel. With all sort of plugins available today, we can easily produce the effect we want by combining different javascript plugins.

Drop a comment if you have any questions. Enjoy!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

51 comments

Javier
Wed, 11th December 2013
Cool and easy stuff!! thanx man!!

Is there any possibility to get 6 columns at the beginning instead of 4?

Then, when the size decreases, have 4 and finaly 2?

Thank you!! Reply
Freddy Rodriguez
Fri, 13th December 2013
Thanks a lot for this tutorial. About to use this on our own redesign. Reply
david
Tue, 31st December 2013
not work! D:
I download the zip ... but nothing comes ... my mistake? Reply
liju
Fri, 3rd January 2014
chandan
Fri, 3rd January 2014
Nice Tutorial but the there seems to be some problem with the download package, thumbnails don't show up Reply
jordan
Thu, 9th January 2014
any tips on how to integrate this into wordpress? Reply
said
Sun, 26th January 2014
thanks a lot man it's realy nice
and work 100% Reply
Sergey Sus
Mon, 27th January 2014
Love this effect and tutorial....
Not sure anyone already said this:

the download of the demo there is a type in the index.html
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

need to have the http: in front of the // lines like so:

src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> Reply
ANDREW
Wed, 19th February 2014
Hey can you help me fix the div height from snapping when selecting categories.

http://www.andrewnl.com/workshop/ Reply
Christina
Thu, 20th February 2014
First of all thank you this is beautiful! I downloaded the files and just like some of the other people I have been having problems with the thumbnails not showing up. I looked at the stylesheet and found a display: none; in the portfolio class which made them show up when i removed them. I added hover and active classes to the lists and I got the nav buttons to show the hover state. Maybe I'm also missing something, not sure what. I have already added the http to the ajax src link. As of now my thumbnails show up and the nag buttons show the states. However the nag buttons don't do anything and I can't see the hover in the images either. I'm sure there's something I missed because even by looking at the demo page source everything looks the same. Any suggestions? Reply
Corey
Wed, 12th March 2014
Christina, I was having the same problem until I added the easing and mixitup js files to the header. Now, everything is working perfectly.


<script type="text/javascript" src="js/jquery.easing.min.js"></script>


<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
Reply
Dan
Fri, 21st February 2014
How would you center that filtering nav? Any ideas? Thanks! Reply
Adrian Paun
Tue, 25th February 2014
Put the filters into a <div class="center"> </div> and add this to youre css:

.center {
margin: 0 auto;
text-align: center;
width: 100%;
}

ul#filters {
display: inline-block;
margin-bottom: 20px;
} Reply
sidra
Wed, 26th February 2014
The Download Package is not showing the images. Reply
Jimmy
Thu, 20th March 2014
Hi, Good work! Lovin it. However, I tried to tweak this to run on bootstrap v3. Problem is ".label" class is overriding bootstrap ".label" so the caption didn't show up.

Also, this uses custom container which overrides also bootstrap '.container'

Any idea how to run this smoothly on bootstrap? can anyone do some bootply.com sample? Greatly appreciate it!
Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement