Question

I’m working on an application that stores images and shows them on a page on by one. If you hover an image a menu should slide up with information of the image (title, description, tags etc).

Below is the code I have, but it doesn’t work. Is it something wrong in the CSS, or what can it be?

Thanks in advance!

html:

<div class="post">
    <img src="image.png" />
    <div class="postDesc">
        content goes here...
    </div>
</div>

jquery:

$('.post').hover(function () {
  $('postDesc').slideToggle('fast');
});

css:

.post {
    background: white;
    border: 1px solid black;
    width: 200px;
    height: 200px;
    margin: 0px auto;
    float: left;
    margin-left: 30px;
    margin-bottom: 30px;
    position: relative;
}

.postDesc { 
    background:#de9a44;
    width:200px; 
    height:200px; 
    display:none; 
    position:absolute;
    left: 0;
    bottom: 0;
}

Answer 1

$(function(){
    $('.post').hover(function () {
     $('.postDesc').slideDown('fast');
    },function(){
             $('.postDesc').slideUp('fast');        
    });
});

http://jsfiddle.net/mwcef/
​