CodePen

HTML

            
              <div class="toggle-zoom">
	<a href="#" class="noclick zin">Zoom In</a>
	<a href="#" class="noclick zout active">Zoom Out</a>						
</div>	

<table data-filter="#filter-logos" class="footable">
	<thead>							
		<tr>
			<th data-sort-ignore="true">Thumbnail</th>
			<th data-sort-ignore="true" title="Sort list">Description</th>
			<th title="Sort list">File Name</th>
			<th title="Sort list">File Type</th>
			<th data-type="numeric" title="Sort list">File Size</th>
			<th data-sort-ignore="true">Download</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="txt-center img-cell">
				<a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/200" alt="" class="tn small"></a>
			</td>
			<td>Logo  horizontal</td>
			<td>logo-h.eps</td>
			<td>EPS</td>
			<td class="txt-right">10KB</td>
			<td class="txt-center p0">
				<a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
			</td>
		</tr>
		<tr>
			<td class="txt-center img-cell">
				<a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/201" alt="" class="tn small"></a>
			</td>
			<td>Logo  horizontal</td>
			<td>logo-h.eps</td>
			<td>EPS</td>
			<td class="txt-right">10KB</td>
			<td class="txt-center p0">
				<a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
			</td>
		</tr>
		<tr>
			<td class="txt-center img-cell">
				<a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/202" alt="" class="tn small"></a>
			</td>
			<td>Logo  horizontal</td>
			<td>logo-h.eps</td>
			<td>EPS</td>
			<td class="txt-right">10KB</td>
			<td class="txt-center p0">
				<a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
			</td>
		</tr>
	</tbody>
</table>
            
          
!

CSS

            
              $lightBlue: blue;
$calibri: Calibri;

body { padding: 10px; }

.footable { width:50%; font-size:14px; border-collapse:inherit; border-spacing:2px; }

.footable > tbody > tr:nth-child(even) { background:lighten(black, 97%); box-shadow:inset 0 1px 2px rgba(black,.1); }
.footable > tbody > tr:hover { background:lighten(yellow, 46%); }

.footable > tbody > tr > td,
.footable > thead > tr > th { border:#ccc 1px dotted; padding:10px; text-align:left; overflow:hidden; position:relative; }

.footable > thead > tr > th,
.footable > thead > tr > td { box-shadow:0 1px 0 rgba(white,.8) inset; border-top:none; text-shadow:0 1px 0 rgba(white,.5); background:#dce9f9; @include background(linear-gradient(lighten(black, 92%), lighten(black, 82%))); cursor:pointer; }

.footable > thead > tr > th { min-width:90px; border-top:#ddd 1px solid; }
.footable > thead > tr > th:hover { background:#ccc; @include background(linear-gradient(white, lighten(black, 90%))); }
.footable > thead > tr > th:first-child { width:152px; } 


.footable > thead > tr > th[data-sort-ignore="true"] { cursor:default;
	&:hover { background:#dce9f9; @include background(linear-gradient(lighten(black, 92%), lighten(black, 82%))); }
}

.footable > tbody img { vertical-align:middle; }

/*Sortable Table*/
.footable > thead > tr > th > span.footable-sort-indicator { float:right; width:16px; height:16px; margin:4px -7px 0 0; background:url('../images/sprite-sorting.png') no-repeat top left; }

.footable > thead > tr > th.footable-sortable:hover { cursor:pointer; }
.footable > thead > tr > th.footable-sorted > span.footable-sort-indicator { background-position:0 -16px; }
.footable > thead > tr > th.footable-sorted-desc > span.footable-sort-indicator { background-position:0 -32px; }


/*Utility icons that need display:block; to fit the entire container*/
a.link-cell { position:relative; margin:-5em; padding:5em; }


/*Thumbnails*/
.footable {
	.zoom-trigger { position:static; 
		&:after { float:right; width:auto; height:20px; content:'Zoom in [+]'; padding:2px 5px; background:#ddd; }
		&.shrink:after { content:'Zoom out [-]'; }
	}
	  a .tn { width:250px;
		   &.small { width:130px;	}	
	  }
 }
	
	.tn-heading {
		td { background:none; }
	}


/*Toggle Zoom*/
.toggle-zoom { margin-bottom:10px;
	a { display:inline-block; padding:5px 15px; border:#ddd 1px solid; border-radius:2px; font:italic normal 13px/1.5 $calibri; text-decoration:none; background:lighten(black, 95%); @include background(linear-gradient(white, lighten(black, 95%))); }
	a:hover { border-color:#aaa; background:lighten(black, 90%); @include background(linear-gradient(white, lighten(black, 90%))); }
	.active,
	.active:hover { cursor:default; color:#666; background:#ccc; @include background(linear-gradient(lighten(black, 80%), lighten(black, 90%))); box-shadow:inset 0 2px 1px rgba(black,.2); outline:none; border-right-color:#aaa; border-bottom-color:#aaa; }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //Zoom
	$('.zoom-trigger').click(function(){
		$(this).find('img').toggleClass('small');
		$(this).toggleClass('shrink');
   if($(".small").length==0)
   {
     //all are zoomed in
     $(".zin").addClass("active");
     $(".zout").removeClass("active");
   }
   else if($(".small").length==$(".zoom-trigger").length)
   {
      $(".zin").removeClass("active");
      $(".zout").addClass("active");
   }
	});

		//Zoom In
		$('.zin').click(function(){
			$('.zoom-trigger').addClass('shrink');
			$('.tn').removeClass('small');
			$(this).addClass('active').siblings().removeClass('active');
    
		});

		//Zoom Out
		$('.zout').click(function(){
			$('.zoom-trigger').removeClass('shrink');
			$('.tn').addClass('small');
			$(this).addClass('active').siblings().removeClass('active');
		});

//Active correct zoom button when all thumnails have been clicked
/*
$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});
*/

//Prevents default action of links
	$('.noclick').click(function(e) {
		e.preventDefault();
	});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................