JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://css-tricks.com/revealing-photo-slider/">CSS-Tricks Photo Slider</a> to answer <a href="http://css-tricks.com/forums/discussion/24337/javascript-help-please-with-revealing-photo-slider-with-jquery-by-css-tricks">this question</a>

<table>
  <tr>
		<td>
      <div class="photo_slider">
			  <img src="http://placekitten.com/500/333"/>
			  <div class="info_area">
			  	<h3>Kitties</h3>
			  	<p><em>By: <a href="#">Kitties!</a></em></p>
			  </div>
		  </div>
    </td>
    <td>
      <div class="photo_slider">
      	<img src="http://placehold.it/500x333"/>
       	<div class="info_area">
       		<h3>Plain Grey</h3>
       		<p><em>By: <a href="#">Plain Grey</a></em></p>
       	</div>
      </div>
    </td>
		<td>
      <div class="photo_slider">
			  <img src="http://placebear.com/500/333"/>
			  <div class="info_area">
				  <h3>Da Bears</h3>
				  <p><em>By: <a href="#">Da Bears</a></em></p>
			  </div>
		  </div>
    </td>
		<td>
      <div class="photo_slider">
			  <img src="http://lorempixel.com/500/333"/>
			  <div class="info_area">
				  <h3>Random</h3>
				  <p><em>By: <a href="#">Random</a></em></p>
			  </div>
		  </div>
    </td>
	</tr>
</table>

CSS

a.close {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: block;
	height: 21px;
  cursor: pointer;
}

.photo_slider_img {
	width: 100px;
	height: 100px;
	margin-bottom: 5px;
	overflow: hidden;
}

td {
	vertical-align: top;
}

.photo_slider {
	position: relative;
	width: 100px;
	height: 130px;
	padding: 10px;
	border: 1px solid black;
	overflow: hidden;
	margin: 25px 10px 10px 10px;
	background: white;
	float: left;
}

.info_area {
	display:none;
}

.more_info {
	display: block;
	width: 89px;
	height: 26px;
	cursor: pointer;
}

JavaScript

// Window load event, slower than DOM Ready but needed because of image calculations
$(window).bind("load", function() {  
			
	$('.photo_slider').each(function(){
		
		var $this = $(this).addClass('photo-area');
		var $img = $this.find('img');
		var $info = $this.find('.info_area');
			
		var opts = {};
		
		opts.imgw = $img.width();
		opts.imgh = $img.height();
		
		opts.orgw = $this.width();
		opts.orgh =  $this.height();
		
		$img.css ({
			marginLeft: "-150px",
			marginTop: "-150px"
		});
		
		var $wrap = $('<div class="photo_slider_img">').append($img).prependTo($this);
	
		var $open = $('<a href="#" class="more_info">More Info &gt;</a>').appendTo($this);
		
		var $close = $('<a class="close">Close</a>').appendTo($info);
		
		opts.wrapw = $wrap.width();
		opts.wraph = $wrap.height();
		
		$open.click(function(){
			$this.animate({ 
				width: opts.imgw,
				height: (opts.imgh+95),
				borderWidth: "10"
				
			}, 600 );
					
			$open.fadeOut();
			
			$wrap.animate({ 
			    width: opts.imgw,
				height: opts.imgh
			}, 600 );
	
			$(".info_area",$this).fadeIn();
			
			$img.animate({
				marginTop: "0px",
				marginLeft: "0px"
			}, 600 );
			
      $this.closest('td')
        .siblings().find('.close').click();
      
			return false;
		});
		
		$close.click(function(){
			$this.animate({ 
				width: opts.orgw,
				height: opts.orgh,
		        borderWidth: "1"
		      }, 600 );
			
			$open.fadeIn();
			
			$wrap.animate({ 
		        width: opts.wrapw,
				height: opts.wraph
			      }, 600 );
			
				$img.animate({
					marginTop: "-150px",
					marginLeft: "-150px"
				}, 600 );
	
			$(".info_area",$this).fadeOut();
			return false;
		});
		
	});

});