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

Written by Kevin Liew on 29 Apr 2016
567,643 Views • Tutorials

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 data-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
david 10 years ago
not work! D:
I download the zip ... but nothing comes ... my mistake?
Reply
liju 10 years ago
chandan 10 years ago
Nice Tutorial but the there seems to be some problem with the download package, thumbnails don't show up
Reply
jordan 10 years ago
any tips on how to integrate this into wordpress?
Reply
said 10 years ago
thanks a lot man it's realy nice
and work 100%
Reply
Sergey Sus 10 years ago
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 10 years ago
Hey can you help me fix the div height from snapping when selecting categories.

http://www.andrewnl.com/workshop/
Reply
Christina 10 years ago
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 10 years ago
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 10 years ago
How would you center that filtering nav? Any ideas? Thanks!
Reply
Adrian Paun 10 years ago
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 10 years ago
The Download Package is not showing the images.
Reply
Jimmy 10 years ago
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
Jc 9 years ago
To make it work with bootstrap just rename the class "label" to something else etc "customlabel". Rename it in the html code and in the css and the conflict will go.
Reply
Angela 10 years ago
How would I adjust the size of the thumbnail?
Reply
Chella 10 years ago
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 10 years ago
i have the same problem
Reply
Kira 10 years ago
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
Julien 9 years ago
Thx for sharing this awesome tuts.
I have the same problem as you Kira, someone can help us ?
Reply
Julien 9 years ago
Thx for sharing this awesome tuts.
I have the same problem as you Kira, someone can help us ?
Reply
Vanessa 9 years ago
Had the same problem and felt so silly after realizing where it was.

In this part of the filter list HTML...
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>


Make sure you list your new categories here as well, and the "All" button will work again!
Reply