<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>
.
