Tutorials

Create A Simple Responsive Portfolio Page with Filtering and Hover Effect (Updated)

Written by Kevin Liew on 29 Apr 2016
362,251 Views • Shares
133 comments

Previously, I was showing how to create portfolio page with filtering and also hover effect for each of your project item. We achieved that effect with CSS3 and jQuery filter & sort plugin called MixItUp.

The response was pretty good, it has been in our popular post list for quite sometimes too. I guess it's due to the fact that filtering UI is quite a popular thing to implement. So, I was looking at the comment, I think I need to do an update and fix some of the issues.

Alright, this time it's not just fixing the issues but with some enhancements as well. Here's the updates:

  • MixItUp is now version 2.1.11, the one we used is way outdated. The good news is, the new one can load your desired filter on first run, not just showing all of it.
  • Easing plugin is removed and replaced with CSS3 transition instead. We can achieve the same thing with smaller file size and less JS. So, why not?
  • There're a couple of comments mentioned there's a bug that causing the whole thing moved 3-4px to the left. It's actually not an issue, because when you show ALL, the content became longer. Therefore, in IE you have a scrollbar displayed on the right which causing the undesired sudden movement that moves everything to the left. I didn't see this because I'm on Mac and scrollbar hover above the content instead of taking up the website viewport space.

I'm trying to keep everything the same so you can update it easily. This script will 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. It's updated to conform to the new MixItUp formatting. Classes are specified in data-filter to be consistent with jQuery filter()

<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 with CSS3.

<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.

html {
  overflow-y: scroll;
}

.container { 
	position: relative; 
	width: 960px; 
	margin: 0 auto; 
	-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;
		top:0;
    -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);		
	}
	
	.portfolio .label {
		position: absolute;
		width: 100%;
		height:40px;
		bottom:-40px;
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	}

		.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;
			}
	
	.portfolio:hover .label {
    bottom:0;
  }
	.portfolio:hover img {
    top:-30px;
  }  

A simple responsive layout to make sure the grid display properly in different window dimension. Removed this bit if you have your own responsive grid system.

/* #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%;
	}		
}

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

Javascript

Lastly, we have the Javascript. You can change its setting by visiting its documentation. They have updated it with a lot of explanation and samples. That's a pretty good job. You can check out the animation configuration to see what else effect can you achieve too.

$(function () {
		
	var filterList = {
	
		init: function () {
		
			// MixItUp plugin
			// http://mixitup.io
			$('#portfoliolist').mixItUp({
				selectors: {
  			  target: '.portfolio',
  			  filter: '.filter'	
  		  },
  		  load: {
    		  filter: '.app' // show app tab on first load
    		}     
			});								
		
		}

	};
	
	// 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.

Hopefully this update will solve a lot of questions you have. Drop a comment if you have any questions. Enjoy!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

133 comments
Macius 5 years ago
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
Ade 3 years ago
any body can solved this issue?
Reply
Jeff Barbosa 3 years ago
I am using the tutorial on a menu of a restaurant web site, are many dishes by category and do not want to use the category 'all' because the site had become too big, someone could help me?
Reply
Akira 5 years ago
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 5 years ago
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 5 years ago
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 5 years ago
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
edgar 4 years ago
you found a solution?
Reply
Kriss 5 years ago
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
Sara 3 years ago
Hi Kriss, did you find a solution to fix this bug? I am having the same problem with 5px of the .portfolio-wrapper showing below each image. It looks like it may be being added by the javascript but i'm not sure how to fix it.
Reply
Brian 5 years ago
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 4 years ago
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 4 years ago
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
Las 2 years ago
I'm having this same issue. Anybody find a solution?

Any help would be appreciated.

Thanks!
Reply
Las 2 years ago
I'm having this exact same issue. Any luck figuring it out?
Reply
Trevor 4 years ago
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 4 years ago
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 4 years ago
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 4 years ago
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 4 years ago
Thanks a lot for this tutorial. About to use this on our own redesign.
Reply