1. CSS

#portfolio {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	}
.portfolio {
	list-style: none;
	position: relative;
	z-index: 9;
	}
.portfolio li {
	float: left;
	margin: 0;
	padding: 0;
	display: inline;
	background: none;
	width: 200px;
	height: 200px;
	}
.portfolio li a {
	display: block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	position: relative;
	}
.portfolio li a .image {
	display: block;
	}
.portfolio li a .label {
	position: absolute;
	top: 157px;
	left: 0;
	z-index: 5;
	}
.portfolio li a .text {
	position: absolute;
	top: 157px;
	left: 0;
	z-index: 4;
	display: block;
	}
.portfolio li a b {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: none;
	width: 250px;
	height: 200px;
	background: #1f0607;
	opacity: 0.7;
	filter: alpha(opacity=70);
	}

2. Подключение jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

3. Подключение jQuery.Easing

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

4. JavaScript

<script type="text/javascript">
	$(document).ready(function(){
		$('.portfolio a').hover(function(){
			at = $(this).find('.text');
			at.stop().animate({top:250},200,'easeInCubic',function(){
				$(this).css({top:-200}).animate({top:0},300,'easeOutCubic');
			});
		},function(){
			at = $(this).find('.text');
			at.stop();
			if (parseInt(at.css('top')) >= 157) {
				at.animate({top:157},200,'easeOutCubic');
			} else {
				at.animate({top:-250},200,'easeInCubic',function(){
					$(this).css({top:250}).animate({top:157},200,'easeOutCubic');
				});
			}
		});
	});
</script>

5. HTML

<div id="portfolio">
	<ul class="portfolio">
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/ff0000.jpg" alt="Красный" class="image" />
				<img src="images/portfolio-na-jquery/ff0000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/ff8000.jpg" alt="Оранжевый" class="image" />
				<img src="images/portfolio-na-jquery/ff8000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/008000.jpg" alt="Зелёный" class="image" />
				<img src="images/portfolio-na-jquery/008000.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/00bbff.jpg" alt="Голубой" class="image" />
				<img src="images/portfolio-na-jquery/00bbff.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/0000ff.jpg" alt="Синий" class="image" />
				<img src="images/portfolio-na-jquery/0000ff.png" alt="" class="text" />
			</a>
		</li>
		<li>
			<a href="#"> <!-- Здесь может быть ссылка на сайт -->
				<img src="images/portfolio-na-jquery/8000ff.jpg" alt="Фиолетовый" class="image" />
				<img src="images/portfolio-na-jquery/8000ff.png" alt="" class="text" />
			</a>
		</li>
	</ul>
</div>