Navigation

Portfolio

  1. Home
  2. Portfolio
Portfolio

Portfolio

Portfolio can be added up by adding the class .portfolio-item and following markup 


<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-up text-center cat-logo">
	<figure>
		<img src="img/portfolio/portfolio1.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated fadeInDownBig a-d-0-4">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInLeftBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInRightBig a-d-0-3 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>

Where form the top container
class .portfolio-item denotes that this div is a portfolio item and must be applied on each portfolio item

class .overlay-up is used for the upward animation on the description overlay while hovering on this item..
There are total 10 classes for description overlay animation .overlay-up, .overlay-down, .overlay-left, .overlay-right, .overlay-up-right, .overlay-up-left, .overlay-down-left, .overlay-down-right, .overlay-zoom-in, .overlay-zoom-out and default(When none of these classes used) is .overlay-up

all the elements of portfolio (heading, buttons) supports all classes of CSS3 animation library `Animate.css` (project link). You can directly use them to animate specific description element on hovering the portfolio item.

Examples

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

Portfolio Examples New Since version v1.1

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

Colored New Since version v1.1

To make overlay colored just add data-bgcolor attribute to figcaption with value as color code(hax/rgb) and to chnage the color of text inside just add attribute data-color with value as color code (hax/rgb)

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

portfolio Image

Portfolio Title

To add filters in the portfolio add `jquery.mixitup.min.js` to your html file and follow this link 


<!-- Portfolio --> 
								  	
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-up text-center cat-logo">
	<figure>
		<img src="img/portfolio/portfolio1.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated fadeInDownBig a-d-0-4">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInLeftBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInRightBig a-d-0-3 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-right text-center cat-web">
	<figure>
		<img src="img/portfolio/portfolio2.png" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated fadeInUpBig a-d-0">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated bounceInUp a-d-0 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated bounceInUp a-d-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-down text-center cat-logo">
	<figure>
		<img src="img/portfolio/portfolio3.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated zoomInDown a-d-0-1">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated swing a-d-0 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated swing a-d-0 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-left text-center cat-web">
	<figure>
		<img src="img/portfolio/portfolio8.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated rollIn a-d-0-1">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated zoomIn a-d-0-1 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated zoomIn a-d-0-1 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-up-right text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio5.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated flipInY a-d-0-1">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated bounceInRight a-d-0 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated bounceInLeft a-d-0 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-down-left text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio6.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated bounceInUp a-d-0">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInDownBig a-d-0-3 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-3 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
				
<!-- New Portfolio Items Since v1.1 -->
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-up-left text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio6.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated fadeInUpBig a-d-0-3">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-down-right text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio5.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n animated fadeInUpBig a-d-0-3">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-zoom-in text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio8.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-zoom-out text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio3.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption>
			<h3 class="heading text-center txt-sm txt-n">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
							
<!-- Coloured Portfolio Items -->
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-zoom-in text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio8.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption data-bgcolor="#422040">
			<h3 class="heading text-center txt-sm txt-n">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
					
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-zoom-out text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio2.png" class="img img-responsive" alt="portfolio Image" />
		<figcaption data-bgcolor="#BB2805">
			<h3 class="heading text-center txt-sm txt-n">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>
						
<div class="col-lg-4 col-md-4 col-sm-6 portfolio-item overlay-up text-center cat-dev">
	<figure>
		<img src="img/portfolio/portfolio3.jpg" class="img img-responsive" alt="portfolio Image" />
		<figcaption data-bgcolor="#07DFDF">
			<h3 class="heading text-center txt-sm txt-n" data-color="#000">Portfolio Title</h3>
			<div class="ul ul-center"><span></span></div>
			<div class="buttons">
				<a href="#" data-color="#222" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-primary btn-lg social-btn border-btn social"><span class="fa fa-facebook"></span></a>
				<a href="#" data-color="#222" class="animated fadeInUpBig a-d-0-2 btn btn-circle btn-default btn-lg social-btn border-btn view"><span class="fa fa-link"></span></a>
			</div>
		</figcaption>
	</figure>
</div>