<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class=""> <h2>Portfoloi image Filter</h2> </div> <div> <button class="btn btn-primary filter-button" data-filter="all">All</button> <button class="btn btn-default filter-button" data-filter="photo">Photo</button> <button class="btn btn-default filter-button" data-filter="graphic">Graphic</button> <button class="btn btn-default filter-button" data-filter="webdesign">Web design</button> </div> <br/> <div class="row"> <div class="col-md-3 filter photo"> <div class="each-item"> <img class="port-image" src="http://www.templates4all.com/wp-content/uploads/2011/09/Engon-Joomla-Corporate-Portfolio-Template.jpg"/> <div class="ms1"> <h3>First</h3> <p>Loream Ipsum your Text here</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> <div class="col-md-3 filter graphic photo"> <div class="each-item"> <img class="port-image" src="http://www.wpchats.com/wp-content/uploads/2011/11/Mixfolio-Wordpress-HTML5-Portfolio-Theme.jpg"/> <div class="ms1"> <h3>Second</h3> <p>Loream Ipsum your Text here</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> <div class="col-md-3 filter webdesign"> <div class="each-item"> <img class="port-image" src="http://danielsitek.cz/pic/small/daniel-sitek-portfolio_small.jpg"/> <div class="ms1"> <h3>Third</h3> <p>Loream Ipsum your Text here</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> <div class="col-md-3 filter graphic photo"> <div class="each-item"> <img class="port-image" src="http://101bestwebsites.com/public/images/entry_images//2009/05/14/medium_www.matthiasdittrich.com.jpg"/> <div class="ms1"> <h3>Four</h3> <p>Loream Ipsum your Text here</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> <div class="col-md-3 filter webdesign graphic"> <div class="each-item"> <img class="port-image" src="http://paperhaus.com/images/products/shrapnel-design-handmade-double-thick-screwpost-portfolio-cover-11x14-landscape-black-anodized-aluminum-14231_detail.jpg"/> <div class="ms1"> <h3>Five</h3> <p>Loream Ipsum your Text here</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> <div class="col-md-3 filter photo"> <div class="each-item"> <img class="port-image" src="http://4.bp.blogspot.com/_IDQ_mBDYk9I/SsON_Or-mGI/AAAAAAAAAEs/0AchAjEekYU/s400/Portfolio-idea-3.jpg"/> <div class="ms1"> <h3>Car show</h3> <p>A car showroom for all verities of cars to display</p> </div> <div class="ms2"> <p class="text-center">Visit</p> </div> </div> </div> </div> </div>

.port-image{ width: 100%;} .col-md-3{ margin-bottom:20px;} .each-item{ position:relative; overflow:hidden;} .each-item:hover .cap2, .each-item:hover .cap1{ left:0px;} .ms1{ position:absolute; width:100%; height:70%; background:rgba(255, 255, 255, 0.5); top:0px; left:-100%; padding:10px; transition: all .5s;} .ms2{ position:absolute; width:100%; height:30%; background:rgba(0, 178, 255, 0.5); bottom:0px; left:100%; padding:10px; transition: all .5s;}

$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); });