Эффект шторок

Изображение, при навдении на него мышкой, скользит в одном из направлений с easing эффектом, открывая скрытый под ним контент.

HTML

<div class="eff">
    <img src="1.gif" alt="Тест 1" title="" width="126" height="126" />
    <div class="caption">
         <a href="http://www.pcvector.net" class="header">Заголовок 1</a>
         <p>Тут может быть помещен любой поясняющий текст. <a href="https://pcvector.net">Cсылка</a></p>
    </div>
</div>

CSS

Стили оформления:

.eff {    
    width:136px; /* размер изображения 126x126, 136 сделано для создания границы */
    height:136px;
    position:relative;    /* important, allow the children object to move inside its parent obj */
    overflow:hidden;  /* important, it hides the moved image */
    float:left; /* with the clear class, make it into 3 x 3 layout */    
    display:inline; /* IE float bug fix */
    margin:8px;
    font-size:12px;
}
.eff img {
    display:block;
    width:126px;
    height:126px;    
    text-decoration:none;
    border:4px solid #ccc;
    background:#ddd;
    position:absolute; /* important, it allows this obj to move by jquery */
    z-index:500; /* make sure it appears above the caption */
    cursor:pointer; cursor:hand;
}
.eff .caption {
    /* размеры должны быть такие же, как и у изображения */
    width:126px;
    height:126px;
    background:#333;
    border:4px solid #ccc;
    color:#eee;
    /* set the position to 0, 0 and appear under the image */
    position:absolute;
    top:0; left:0;
    z-index:0;
}
/* оформление скрытого контента*/
.eff .caption a.header {
    margin:10px 5px 5px 5px;
    display:block;
    font-size:14px;    
    font-weight:700;
    color:#4ed7f4;
}
.eff .caption p {
    margin:5px;    
}

JS

Подключаем jQuery и easing плагин эффектов:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="js/jquery.easing.1.3.js"></script>

$(document).ready(function() {
  //если мышь над или вне контейнера с классом .eff
  $('.eff').hover(
    function() {
      value = $(this).find('img').outerHeight() * -1;
      //for left/right if you have different width and height, 
      //commented out because we are using up/down in this example
      //value = $(this).find('img').outerWidth() * -1); 
      //анимация изображения
      // вы можете изменить направление скольжения слайда, меняя bottom на left, right или top
      // если вы изменили направление, то нужно будет изменить и позицию hover out
      $(this).find('img').stop().animate({
        bottom: value
      }, {
        duration: 500,
        easing: 'easeOutBounce'
      });
    },
    function() {
      //сброс изображения
      // свойство позиции (bottom), должно быть такое же, как и при mouseover
      $(this).find('img').stop().animate({
        bottom: 0
      }, {
        duration: 500,
        easing: 'easeOutBounce'
      });
    });
  //при клике по миниатюре
  $('.eff').click(function() {
    //захват и выполнение первой ссылки в миниатюре
    window.location = $(this).find('a:first').attr('href');
  });
});