Docs - Portfolio

We have provided five portfolio styles. You can also create your own portfolio style.

To create portfolio style, you need to use portfolio.css, hover.css and jquery.portfolio.js.

Breakpoints for Different Devices

Options for grid rows and columns size classes

• .row - creates grid row
• .portfoliobox - creates grid column that uses 100% of parent width on lg and larger screens.
• .portfoliobox3 - creates grid column that uses 100% of parent width on lg and larger screens.
• .portfoliobox4 - creates grid column portfolio lg and larger screens.
• .portfoliobox5 - creates grid column takes 50% of parent width on lg and larger screens.

Portfolio Example Here

Portfolio 1

                  
      <!-- Your Html structure  -->
      <div class="portfolioFilter">
        <ul>
           <li><a href="#" data-filter="*">All</a></li>
           <li><a href="#" data-filter=".mobapp">MobilApp</a></li>
           <li><a href="#" data-filter=".html">Html5</a></li>
           <li><a href="#" data-filter=".css3">css</a></li>
        </ul>
      </div>
      <!-- Your Html filter portfolio container structure -->
      <div class="portfoliodiv">
      
      <div class="mobapp text-center portfoliobox">
      	<div class="portfolio1">
           <img src="Image path here">
           <div class="mask-img">
           	   <div class="zoomicon">
			<img src="Icon image path here">
        	    </div>
           </div>        
        </div> 
        <div class="portfoliotitle">
             <h3><!-- title goes here --></h3>
             <span><!-- catagory name goes here --></span>
        </div>      
      </div>
      
      <div class="html text-center portfoliobox">
      	<div class="portfolio1">
           <img src="Image path here">
           <div class="mask-img">
           	   <div class="zoomicon">
			<img src="Icon image path here">
        	    </div>
           </div>        
        </div> 
        <div class="portfoliotitle">
             <h3><!-- title goes here --></h3>
             <span><!-- catagory name goes here --></span>   
        </div>      
      </div> 
      
      <div class="css text-center portfoliobox">
      	<div class="portfolio1">
           <img src="Image path here">
           <div class="mask-img">
           	   <div class="zoomicon">
			<img src="Icon image path here">
        	    </div>
           </div>        
        </div> 
        <div class="portfoliotitle">  
            <h3><!-- title goes here --></h3>
            <span><!-- catagory name goes here --></span>
        </div>      
      </div>   
      </div>
                    
                 

Portfolio 2

                  
      <!-- Your Html structure  -->
      <div class="portfolioFilter">
        <ul>
           <li><a href="#" data-filter="*">All</a></li>
           <li><a href="#" data-filter=".mobapp">MobilApp</a></li>
           <li><a href="#" data-filter=".html">Html5</a></li>
           <li><a href="#" data-filter=".css3">css</a></li>
        </ul>
      </div>
      <!-- Your Html filter portfolio container structure -->
      <div class="portfoliodiv">
      
      <div class="mobapp text-center portfoliobox">
      	<div class="portfolio2">
           <img src="Image path here">
           <div class="mask-img">
           	   <h4><!-- title goes here --></h4>
                 <span><!-- catagory name goes here --></span>
           </div>        
        </div> 
      </div>
      
      <div class="html text-center portfoliobox">
      	<div class="portfolio2">
           <img src="Image path here">
           <div class="mask-img">
           	   <h4><!-- title goes here --></h4>
                 <span><!-- catagory name goes here --></span>
           </div>        
        </div> 
      </div>
      
      <div class="css3 text-center portfoliobox">
      	<div class="portfolio2">
           <img src="Image path here">
           <div class="mask-img">
           	   <h4><!-- title goes here --></h4>
                 <span><!-- catagory name goes here --></span>
           </div>        
        </div> 
      </div>
      </div>
                    
                 

Portfolio 3 - Full Width

                  
      <!-- Your Html structure  -->
      <div class="portfolioFilter">
        <ul>
           <li><a href="#" data-filter="*">All</a></li>
           <li><a href="#" data-filter=".mobapp">MobilApp</a></li>
           <li><a href="#" data-filter=".html">Html5</a></li>
           <li><a href="#" data-filter=".css3">css</a></li>
        </ul>
      </div>
      <!-- Your Html filter portfolio container structure -->
      <div class="portfoliodiv">
      
      <div class="mobapp text-center portfoliobox3">
      	<div class="portfolio3">
           <img src="Image path here">
           <div class="mask-img">
                <div class="zoomicn"><img src="Icon path here"></div>
                <h4><!-- title goes here --></h4>
                <span><!-- catagory name goes here --></span>
           </div> 
        </div> 
      </div>
      
      <div class="html text-center portfoliobox3">
      	<div class="portfolio3">
           <img src="Image path here">
              <div class="mask-img">
                <div class="zoomicn"><img src="Icon path here"></div>
                <h4><!-- title goes here --></h4>
                <span><!-- catagory name goes here --></span>
           </div> 
        </div> 
      </div>
      
      <div class="css3 text-center portfoliobox3">
      	<div class="portfolio3">
          <img src="Image path here">
           <div class="mask-img">
                <div class="zoomicn"><img src="Icon path here"></div>
                <h4><!-- title goes here --></h4>
                <span><!-- catagory name goes here --></span>
           </div> 
        </div> 
      </div>

      </div>
                    
                 

Portfolio 4 - Masonary Grid

                  
     <div class="filter">
        <ul>
           <li><a href="#" data-filter="*">All</a></li>
           <li><a href="#" data-filter=".mobapp">MobilApp</a></li>
           <li><a href="#" data-filter=".html">Html5</a></li>
           <li><a href="#" data-filter=".css3">css</a></li>
        </ul>
      </div>
      <!-- Your Html filter portfolio container structure -->
      <div class="portfoliodiv4">
      
      <div class="mobapp portfoliobox4">
      	<div class="portfolio4">
           <img src="Image path here">
           <div class="mask-img">
                <div class="hvrlink">
                    <img src="Icon path here">
                    <h4><!-- title goes here --></h4>
                    <span><!-- catagory name goes here --></span>
                </div>
           </div> 
        </div> 
      </div>
      
      <div class="html portfoliobox4">
      	<div class="portfolio4">
           <img src="Image path here">
           <div class="mask-img">
                <div class="hvrlink">
                    <img src="Icon path here">
                    <h4><!-- title goes here --></h4>
                    <span><!-- catagory name goes here --></span>
                </div>
           </div> 
        </div> 
      </div>
      
      <div class="css3 portfoliobox4">
      	<div class="portfolio4">
           <img src="Image path here">
           <div class="mask-img">
                <div class="hvrlink">
                    <img src="Icon path here">
                    <h4><!-- title goes here --></h4>
                    <span><!--  name goes here --></span>
                </div>
           </div> 
        </div> 
      </div>

      </div>
                    
                 

Portfolio 5 - Timeline Grid

           
    <div class="portfoliotimeline">
      <div class="portfoliocenter">
        <div class="monthtitle">March 2014</div>
        <div class="clearfix"></div>
        <div class="portfoliobox5">
            <a href="#">
                <h3 class="text-right"><strong>Date here</strong> Month Name here </h3>
                <div class="portfolio5">
                    <img src="Images path here">
                    <div class="mask-img">
                        <img src="Images path here">
                        <h4><!-- title goes here --></h4>
                        <span><!-- catagory name here --></span>        
                    </div>
                </div>
            </a>
        </div>
        <div class="portfoliobox5">
            <a href="#">
                <h3 class="text-left"><strong>Date here</strong> Month Name here </h3>
                <div class="portfolio5">
                    <img src="Images path here">
                    <div class="mask-img">
                        <img src="Images path here">
                        <h4><!-- title goes here --></h4>
                        <span><!-- catagory name here --></span>        
                    </div>
                </div>
            </a>
        </div>
        <div class="portfoliobox5">
            <a href="#">
                <h3 class="text-right"><strong>Date here</strong> Month Name here </h3>
                <div class="portfolio5">
                    <img src="Images path here">
                    <div class="mask-img">
                        <img src="Images path here">
                        <h4><!-- title goes here --></h4>
                        <span><!-- catagory name here --></span>        
                    </div>
                </div>
            </a>
        </div>
        <div class="portfoliobox5">
            <a href="#">
                <h3 class="text-left"><strong>Date here</strong> Month Name here </h3>
                <div class="portfolio5">
                    <img src="Images path here">
                    <div class="mask-img">
                        <img src="Images path here">
                        <h4><!-- title goes here --></h4>
                        <span><!-- catagory name here --></span>        
                    </div>
                </div>
            </a>
        </div>
       </div>
    </div>