"Portfolio With Animation & Categories"
Bootstrap 3.3.0 Snippet by brkrobert

<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 ----------> <section> <div class="gallary animate-grid"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="categories"> <ul> <li> <ol> <li><a href="#" data-filter="*" class="active">All</a></li> <li><a href="#" data-filter=".web">Web Design</a></li> <li><a href="#" data-filter=".photography">Photography</a></li> <li><a href="#" data-filter=".app">Mobile App</a></li> <li><a href="#" data-filter=".branding">Branding</a></li> </ol> </li> </ul> </div> </div> </div> <div class="row gallary-thumbs"> <div class="col-sm-6 col-md-3 branding"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 photography app"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 branding"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 branding"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 web"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 app"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 photography web"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> <div class="col-sm-6 col-md-3 web"> <div class="gallary-item"> <div class="hover-bg"> <a href="#"> <div class="hover-text"> <h4>Logo Design</h4> <small>Branding</small> <div class="clearfix"></div> <i class="fa fa-plus"></i> </div> <img src="http://placehold.it/660x450/CCC/FFF" class="img-responsive" alt="..."> </a> </div> </div> </div> </div> </div> </div> </section> <script type="text/javascript" src="http://www.designbootstrap.com/livedemos/2015/02/04/pink/assets/js/jquery.isotope.js"></script>
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); ul, ol { padding: 0;} /*GALLARY*/ .gallary .fa.fa-plus { height: 30px; width: 30px; border: 1px solid #FCAC45; font-size: 20px; padding: 5px; border-radius: 50%; color: #FCAC45; } .gallary ul { padding: 10px 0; } .gallary ul li { display: inline-block; margin-top: 10px; } .gallary ol li { display: inline-block; margin-left: 20px; } .gallary ol li:after { content: ' | '; margin-left: 20px; } .gallary ol li:last-child:after { content: ''; } .gallary ol li a { color: #222222; } .gallary ol li a.active { font-weight: 700; } .gallary .gallary-item { margin-bottom: 20px !important; display: block; position: relative; margin: 0 auto; max-width: 400px; } .gallary .gallary-item .hover-bg { overflow: hidden; position: relative; } .gallary .hover-bg .hover-text { position: absolute; text-align: center; margin: 0 auto; color: #ffffff; background: rgba(0, 0, 0, 0.66); padding: 25% 0; height: 100%; width: 100%; opacity: 0; transition: all 0.5s; } .gallary .hover-bg .hover-text>h4 { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: all 0.3s; } .gallary .hover-bg:hover .hover-text>h4 { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(0); transform: translateY(0); } .gallary .hover-bg .hover-text>i { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); transition: all 0.3s; } .gallary .hover-bg:hover .hover-text>i { opacity: 1; -webkit-backface-visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { z-index: 1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope-item { margin-right: -1px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .isotope { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } @media (max-width: 767px) { .isotope { height: auto !important; } .isotope-item { text-align: center; transform: none !important; position: relative !important; } }
$(window).load(function() { var $container = $('.animate-grid .gallary-thumbs'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false } }); $('.animate-grid .categories a').click(function() { $('.animate-grid .categories .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); });

Related: See More


Questions / Comments: