<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script>
$(function () {
  $('.photo_descr').css('display', 'none');
  $(".photo_bar").css('z-index', '0');
  $(".photo_bar").live({
    mouseover: function() {
      $(this).css('z-index', '1').find('.photo_descr').css('display', 'block').width($(this).find('img').width()+16);
    },
    mouseout: function() {
      $(this).css('z-index', '0').find('.photo_descr').css('display', 'none');
    }
  });
});
</script>
<style>
.photo_bar {
    float: left;
    margin: 1px;
    position: relative;
    text-align: center;
    vertical-align: top;
}
.photo_bar > .photo_descr {
    background: none repeat scroll 0 0 #F5FFE7;
    border: medium none;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.6);
    margin: -8px 0 0 -8px;
    padding-bottom: 5px;
    padding-top: 158px;
    position: absolute;
    top: 0;
    z-index: 1;
}
img {
    position: relative;
    z-index: 2;
}
</style>
<div class="photo_bar">
  <img alt="Не удалось загрузить миниатюру" src="/photo/temp/mini_img_1.jpg" />
  <div class="photo_descr">
    Краткое описание 1<br />
    <a href="/photo/full_img_1.jpg">Название 1</a><br />
    Дата 1<br />
  </div>
</div>
<div class="photo_bar">
  <img alt="Не удалось загрузить миниатюру" src="/photo/temp/mini_img_2.jpg" />
  <div class="photo_descr">
    Краткое описание 2<br />
    <a href="/photo/full_img_2.jpg">Название 2</a><br />
    Дата 2<br />
  </div>
</div>