<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 ---------->
<!-- =========================
Portfolio
============================== -->
<section id="portfolio" class="portfolio padding-large text-center">
<div class="container">
<!-- ***** Portfolio Filters ***** -->
<div class="filters">
<ul class="wow lightSpeedIn">
<li><a href="#" data-filter="*" class="active"><i class="icon-grid"></i></a></li>
<li><a href="#" data-filter=".print">Print Media</a></li>
<li><a href="#" data-filter=".icon">Icon Design</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
<li><a href="#" data-filter=".web-design">Web Design</a></li>
<li><a href="#" data-filter=".ui">UI</a></li>
</ul>
</div> <!-- *** end filters *** -->
</div> <!-- *** end container *** -->
<!-- ***** Portfolio wrapper ***** -->
<div class="portfolio-wrapper margin-bottom-medium">
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item print">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item photography">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 2"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Cute
<strong class="white-color bold-text">Kittens</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item photography">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item print">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item ui">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item web-design">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item web-design">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
<!-- =========================
Portfolio item
============================== -->
<div class="portfolio-item icon">
<div class="portfolio">
<a href="http://placehold.it/660x660/FAFAFA/CCC" data-lightbox-gallery="portfolio">
<img src="http://placehold.it/660x660/FAFAFA/CCC" alt="Portfolio 1"/><!-- END PORTFOLIO IMAGE -->
<div class="portfolio-overlay hvr-rectangle-out">
<h2 class="margin-bottom-small">
Our
<strong class="white-color bold-text">Portfolios</strong>
</h2>
<div class="button">View Project</div>
</div><!-- END PORTFOLIO OVERLAY -->
</a>
</div>
</div> <!-- *** end portfolio-item *** -->
</div> <!-- *** end portfolio-wrapper *** -->
<a href="#" class="button light margin-top-medium margin-bottom-medium hvr-grow"><i class="icon-reload"></i> Load More</a>
</section> <!-- *** end Portfolio *** -->
<script src="http://choyan.me/demo/KreFolio/js/isotope.pkgd.min.js" type="text/javascript"></script>
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
/* ========================================================================
2.10 Component: Portfolio
========================================================================== */
.portfolio .line {
margin: 15px auto 45px;
}
.portfolio .subtitle {
font-size: 20px;
}
.portfolio p {
color: #6b6b6b;
font-size: 14px;
margin-top: 10px;
}
.portfolio .filters {
color: #9e9e9e;
}
.portfolio .filters li {
display: inline;
}
.portfolio .filters li a {
margin: 0 5px;
color: #9e9e9e;
}
.portfolio .filters .active {
color: #e74c3c;
text-decoration: none;
}
.portfolio .portfolio-item {
width: 25%;
overflow: hidden;
padding: 0;
margin: 0;
}
.portfolio .portfolio-item a {
position: relative;
display: block;
color: #fff;
}
.portfolio .portfolio-item a .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
z-index: 4;
opacity: 0;
transition: all 0.3s ease-in-out;
padding: 125px 20px;
}
.portfolio .portfolio-item a img {
width: 100%;
transition: all 1.2s linear;
}
.portfolio .portfolio-item a:hover > .portfolio-overlay {
opacity: 1;
}
.portfolio .portfolio-item a:hover > img {
transform: scale(1.2);
}
.portfolio > .button {
border-color: #333;
font-weight: normal;
color: #333;
position: relative;
z-index: 10;
}
.portfolio > .button i {
font-size: 22px;
}
.filters li a:after {
content: "/";
margin-left: 10px;
color: #9e9e9e;
}
.filters li:last-child > a:after {
content: "";
}
/* ========================================================================
1.4 Hover animation by hover.css http://ianlunn.github.io/Hover/
========================================================================== */
@-webkit-keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
.hvr-pulse {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pulse:hover,
.hvr-pulse:focus,
.hvr-pulse:active {
-webkit-animation-name: hvr-pulse;
animation-name: hvr-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
/* Rectangle Out */
.hvr-rectangle-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-rectangle-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(231, 76, 60, 0.9);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-rectangle-out:hover,
.hvr-rectangle-out:focus,
.hvr-rectangle-out:active {
color: white;
}
.hvr-rectangle-out:hover:before,
.hvr-rectangle-out:focus:before,
.hvr-rectangle-out:active:before {
-webkit-transform: scale(1);
transform: scale(1);
}
/* Grow */
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* General button style (reset) */
.portfolio-wrapper .button {
padding: 20px 60px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
}
.portfolio-wrapper .button:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 3px solid #fff;
color: #fff;
width: 100%;
height: 0;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.portfolio-wrapper .button:hover,
.button:active {
color: #e74c3c;
}
.portfolio-wrapper .button:hover:after {
height: 260%;
opacity: 1;
}
.portfolio-wrapper .button:active:after {
height: 400%;
opacity: 1;
}
/* ========================================================================
Portfolio Filter
========================================================================== */
$(document).ready(function () {
var container = $('.portfolio-wrapper'); // portfoolio container
container.isotope({
itemSelector: '.portfolio-item',
animationEngine: 'best-available',
animationOptions: {
duration: 200,
queue: false
},
layoutMode: 'fitRows'
});
// sort items on button click
$('.filters a').on( 'click', function() {
$('.filters a').removeClass('active');
$(this).addClass('active');
var filterValue = $(this).attr('data-filter');
container.isotope({
filter: filterValue
});
initIsotope();
return false;
});
// Split columns for different size layout
function splitColumns() {
var windowWidth = $(window).width(),
columnNumber = 1; // default column number
if (windowWidth > 1200) {
columnNumber = 4;
} else if (windowWidth > 767) {
columnNumber = 3;
} else if (windowWidth > 600) {
columnNumber = 2;
}
return columnNumber;
}
// Set width for portfolio item
function setColumns() {
var windowWidth = $(window).width(),
columnNumber = splitColumns(),
postWidth = Math.floor(windowWidth / columnNumber);
container.find('.portfolio-item').each(function() {
$(this).css({
width: postWidth + 'px'
});
});
}
// initialize isotope
function initIsotope() {
setColumns();
container.isotope('layout');
}
container.imagesLoaded(function() {
setColumns();
});
$(window).bind('resize', function() {
initIsotope();
});
initIsotope();
});
