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

tarun
Wed, 31st July 2013
i found a typo: "By match data-filter with date-cat" should read data-cat Reply
Kevin Admin
Wed, 31st July 2013
Thanks for letting me know! Reply
tinap
Wed, 31st July 2013
Thank you for this easy, simple tutorial. Am just building my portfolio and wanted to focus on what's important - the work! Reply
isaiah
Thu, 1st August 2013
Ok so i downloaded this and it doesn't work
Reply
Vaib
Wed, 4th December 2013
First of all thanx for this script.
isaiah jut change

//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"

to

"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"

it work's for me. Reply
ove
Mon, 12th May 2014
thanx!! this did it Reply
Jeremy D'Arcy
Wed, 7th August 2013
Great Tutorial!

I noticed that some of the names in your code need to be changed in order for it to work.
eg:
In the javascript functions:
#clientlist should be #portfoliolist
and .client should be .portfolio

I still haven't been able to get the hover function to work however... not sure why.

Here's what I'm using:

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

}

Reply
kevin Admin
Wed, 7th August 2013
Thanks for the info! When I build it, it was clientList and change it in the end but forgot to update the article. :) Reply
Jeremy D'Arcy
Wed, 7th August 2013
Ha, ok, figured it out. Building this from scratch before looking at the demo....

I was just missing the script for easing.


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


now it works!

nice work. Thank you! Reply
Hello
Fri, 9th August 2013
Hello,
how to enlarge image when click on it?

Thanks. Reply
Kevin Admin
Mon, 12th August 2013
Do you mean a popup modal window to show large version of image? If that's the case you can look for a lightbox plugin and put them together. Reply
Halee
Tue, 19th November 2013
I can't seem to get a lightbox to work with this, once I ad the script for the lightbox all of my images disappear??? Reply
Tim Kneipp
Sat, 21st December 2013
Hi Halee, I had the same problem with Lightbox, but after a some trial and error I found that removing this this script
<script src="js/jquery-1.10.2.min.js"></script>
will make everything fall into place.
Hope that helps. Reply
Adrian Paun
Tue, 25th February 2014
Use prettyPhoto, it works great with this portfolio. Reply
Ricky
Sat, 10th August 2013
Hi! Im brand new to this sort of thing and already stuck using the downloaded master files!

I unzipped the file and double clicked the index.html expecting it to work like the version online, however all that shows up is the names of the buttons, the All button is in orange and if you however over the rest the cursor does change, but nothing happens if you click.

Have i missed something stupid? Im aiming to use this as a basis and modify it to meet my needs! Reply
Ricky
Sat, 10th August 2013
Hi, i posted a message earlier about the code not working offline, i found out that http: had to be added to the 15 line about ajax when working offline!

Just wondering if there was a way to adjust the code to make one picture go in to two categories? Say if it fitted under both Card and Logo.

Reply
Kevin Admin
Sun, 11th August 2013
Hi Ricky, apparently, based on MixItUp doc, you can do like this:


<div class="portfolio logo card" data-cat="logo">


I added card in the class, it will appear in both logo and card filter. Reply
Ricky
Mon, 12th August 2013
Ha! I knew it would be something simple! It works great! Thanks! Reply
Becs
Fri, 23rd August 2013
Hi,

I just downloaded the demo, but the demo doesn't work.

None of the portfolio items appear.

When will this be fixed?

Thanks. Reply
Kevin Admin
Mon, 26th August 2013
Hi Becs, Line 17 index.html, please add http: in front of the script src. Reply
Dave
Sat, 28th September 2013
I am having issues with this when I try integrating it into ZURB's Foundation, most of the script is working but for some reason when I hover over the image to see the more information section that pops up (ie: Bird Photos, APP), the text does not appear, it is just a coloured box. Any ideas on how to fix this? Really love the way this application looks and works! Reply
Luke
Tue, 1st October 2013
Hi Kevin,

Great tutorial! Thanks for posting! :)

If I wanted to change the size of the thumbnails and number on each row, how would I go about doing this?

Really appreciate your help!

Thanks! Reply
Kevin Admin
Sun, 6th October 2013
Hi Luke, you change it in CSS portfolio class. Reply
sdk
Sun, 13th October 2013
would it be possible to place the filter navigation as wordpress custom menu items? So, instead of having the tab filters above the thumbs, the filters would act as submenu items?

eg.

About
Portfolio
-Water
-Fire
-Earth
-Air
Contact Reply
Shashikant
Thu, 17th October 2013
Could you please tell me how can i add hover effect on tabs under <li> items. Reply
Macius
Mon, 21st October 2013
Hey, great solution and it works fine for me.
I am asking myselfe how to tell the script to not show all entries on start.
I do not want to use "All" as category and the portfolio should only show the entries from logo on initial page load.

How can I make this? Reply
Akira
Thu, 24th October 2013
Hi, first, THANK YOU SOO MUCH!!!

I failed on this exact task on my own and stumbled on your page! Now I have a interesting problem. There are free spaces so its

IMAGE1 IMAGE2 IMAGE3
IMAGE4 IMAGE5
IMAGE6 IMAGE7

and so on. I can't see ANY patter, and already tried just to plain copy and paste the DEMO into my site, which isn't helping at all. Any Idea?

Reply
TheTechDude01
Sat, 26th October 2013
Heya!

when i try to write something below all the portfolio items, it does not matter how many line breaks i give, linke breaks would not count...

Can you please help me with this? Reply
sadashiv
Wed, 30th October 2013
Hai Kevin,
This tutorial so nice , how to display big image on clicking thumnail image.
for ex - if i click web link then 4 images will display and i click any one image it should display related big image in pop up widow, pls send me solution Reply
Trevor
Mon, 4th November 2013
Hello, very nice... I was wondering if there was a way to create a link on another page to link to a specific filter? So when you come to the page any one of the filter buttons will be active depending on which one you linked to.

Trevor Reply
Kriss
Tue, 12th November 2013
I found nasty bug... if u look closely, on hover, orange box don't stretch over all image, If u look closely on the right side, u can see how orange stretches a bit after about second. When mouse is out, again for a sec, there is visible orange line . This catches the eye if there are opposite collors, like black image and bright description box... Any ideas how to fix this ? Reply
Brian
Sat, 23rd November 2013
Hi Kevin,

Your script works great for my site. I would however like to disable to label hiding effect. What lines do I need to delete? I can't seem to get it to work for mine.

Thank you! Reply
Nick
Sat, 30th November 2013
Hi,

I've been trying to make the filtering work.
Here's what I have: www.nicolasta.com/2k14/
So when I click one of the cat, it shuffles but all the elements go back in place like the filtering didn't happen.

It'd be nice to have some help.
Thanks for reading. I am looking forward to hearing from you soon.

Nick. Reply
ally
Fri, 14th March 2014
Nick, i am having the same problem... did you find a solution?


I've been trying to make the filtering work.
Here's what I have: www.nicolasta.com/2k14/
So when I click one of the cat, it shuffles but all the elements go back in place like the filtering didn't happen.

It'd be nice to have some help.
Thanks for reading. I am looking forward to hearing from you soon.
Reply
Trevor
Tue, 3rd December 2013
I really like this and I've used it on a couple of projects already. Thank you! I do have one question, when I figure my categories I have to list them in the class of the portfolio div as opposed to the data-cat? Is that right? It works for me that way. Reply
Hakan
Mon, 9th December 2013
I red that these codes have some issues.
Is there any version to download and working properly?
Because it is still not working. Somehow thumbnails dont show-up.

Thanx Reply
Javier
Tue, 10th 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
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
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