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

96 comments

Ferdy
Mon, 16th March 2015
MixItOut should be MixItUp Reply
Frank
Sun, 22nd March 2015
I know this is going to sound stupid but how do I remove the hover effect? I've taken out all the code in the css but when I try to delete the section in the JQuery it keeps coming up with an error. I'm still very new to Js so having troubles :(


I tried doing this:

$(function () {

var filterList = {

init: function () {

// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
});

},



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


});

but showing error :( Reply
cris
Wed, 25th March 2015
it would be a great tutorial if it would load the images.
I am pretty new in programming and have no idea what to change to see the images.

Reply
Essentie
Sun, 29th March 2015
Hello, that's a very good script!
But how can I make the filtered items have align: center.
Now they align left and if there 2 or 3 items, it doesn't look good.
Thanx
Reply
Marek
Wed, 8th April 2015
Thanks for the tutorial! I have just started working with the script. I am wondering if there is a way to adjust the code to allow more than one filter to be pressed at once?

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