<style type="text/css">	
.preview img { height : 250px; width:100%; }
</style>
<section class="title">
	<div class="container">	
		<div class="row-fluid">		
			<div class="span6">			
				<h1>Products</h1>		
			</div>		
			<div class="span6">	
				<ul class="breadcrumb pull-right">
					<li>
						<a href="index.html">Home</a> 
						<span class="divider">/</span>
					</li>				
					<li class="active">Products</li>
				</ul>		
			</div>	
		</div>
	</div>
</section>
    <!-- / .title -->     
<section id="portfolio" class="container main">    	
	<ul class="gallery col-3">	<!--Item 1-->		
	<?php foreach($categories as $key=>$value) {		?>				
		<li>			
			<div class="preview">
				<img alt=" " src="<?php echo base_url(); ?>uploads/categories/<?php echo $value['category_image']; ?>">				
				<div class="overlay"></div>				
				<div class="links">					
					<a data-toggle="modal" href="#modal-<?php echo $value['category_id']; ?>"><i class="icon-eye-open"></i></a><a href="<?php echo base_url(); ?>home/productslist/<?php echo $value['category_id']; ?>"><i class="icon-link"></i></a>    
				</div>		
			</div>		
			<div class="desc">		
				<h5><?php echo $value['category_name']; ?></h5>	
			</div>			
			<div id="modal-<?php echo $value['category_id']; ?>" class="modal hide fade">	
				<a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>				
				<div class="modal-body">					
					<img src="<?php echo base_url(); ?>uploads/categories/<?php echo $value['category_image']; ?>" alt=" " width="100%" style="max-height:400px">				
				</div>		
			</div>   
		</li>		
				<?php } ?>			
	</ul>
</section>