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

61 comments

Angela
Mon, 14th April 2014
How would I adjust the size of the thumbnail? Reply
Chella
Fri, 18th April 2014
Hi,

I am such a noob with codes, but if I download this demo and open it in a browser it only shows the buttons and nothing more (is that normal? The images are supposed to be shown right? 'Cause there is a image map..)

Anyway, I put the gallery codes and all in my website code and placed my images in the gallery code, but these are also not showing and the buttons don't do anything either.. :P Please help me! Reply
bet
Sun, 18th May 2014
i have the same problem Reply
Kira
Wed, 23rd April 2014
Wonderful script, thank you! When I change category names, they filter correctly when clicking the top menu button, but when I click "All" once again the new categories are missing from the reconstructed list. Any ideas? Reply
Henry
Mon, 28th April 2014
May I develop again and distibute more?

Thank you Reply
Asif Khan
Sun, 11th May 2014
But how can I implement this dynamically in wordpress ? Reply
th3lonius
Mon, 12th May 2014
I really don't understand why this isn't working for me. I am implementing with Wordpress and all of my categories for classes and data-filters are queried correctly. Just to be sure, I have used your code to the letter, meaning I've used your exact HTML and CSS structure with your class names and the same exact initializing function with jQuery. I just don't get it.

My filter list displays of course, but the portfolio list does not. Please help. Reply
fabian6r
Wed, 18th June 2014
add this bro! :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



;) Reply
Umberto
Wed, 16th July 2014
Very good job!
Thank you! :) 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