<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {

// transition effect
style = 'easeOutQuart';

// if the mouse hover the image
$('.photo').hover(
function() {
//display heading and caption
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
}
);

});
</script>
<style>

.photo {
position:relative;
font-family:arial;
overflow:hidden;
border:5px solid #000;
width:350px;
height:233px;
}

.photo .heading, .photo .caption {
position:absolute;
background:#000;
height:50px;
width:350px;
opacity:0.6;
}

.photo .heading {
top:-50px;
}

.photo .caption {
bottom:-50px;
left:0px;
}

.photo .heading span {
color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
font-size:15px;
padding:5px 0 0 10px;
}

.photo .caption span{
color:#999;
font-size:11px;
display:block;
padding:5px 10px 0 10px;
}

</style>

<div class="photo">
<div class="heading"><span>Название картинки</span></div>
<img src="$IMG_URL1$">
<div class="caption"><span>Здесь любое ваше описание</span></div>
</div>