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