Всплывающие подписи к изображениям
 

Здравствуйте. Решил реализовать такую вещь: при наведении на изображение, снизу выдвигается div с каким-то текстом. При реализации возник ряд проблем. Буду благодарен комментариям и возможным вариантом, как довести данный скрипт до ума.


index.html

<img class="img" src="images/4.jpg" alt="" width="400" />
<div class="image"><p>Описание изображения</p></div>

style.css

.image{
background: #359FBC;
opacity: 0.6;
color: #fff;
padding: 10px 0 19px 34px;
width: 366px;
margin: -57px 0 0;
}

script.js

$(document).ready(function (){
$('.image').hide();

$('img').mouseenter(function(){
$('.image').slideDown(function(){
$(this).show();
});
})

$('img').mouseleave(function(){
$('.image').slideUp(function(){
$(this).hide();
});
})

});

На CSS можно сделать.