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>