css classes transition on hover not working

Question

Below is the code for a div inside a div sliding up to 50% using a css transition. I am having a problem though with my classes and id. The CSS is correct however I can not get it working, could somebody please tell me where I have gone wrong?

Thanks in advance.

CSS

<style>
    .maincontentdiv {
        position:relative;
        height:200px;
        width:200px;
        background:red;
    }
    .slideup {
        position:absolute;
        bottom:0;
        max-height:0;
        overflow:hidden;
        background:blue;
        transition:max-height 250ms ease-in;
    }
    .maincontentdiv:hover {
        max-height:50%;
    }
</style>

HTML

<div class="maincontentdiv">
    <div class="slideup"></div>
</div>

It works fine when I used div and div div instead of classes and id, but when I try to use classes and id it stops working so I dont think it would be the actual code :)

Answer 1

http://jsbin.com/slideUpUsingMinHeight/

.maincontentdiv {
    position:relative;
    height:200px;
    width:200px;
    background:red;
}
.slideup {
    position:absolute;
    width:100%;         /* Absolute el. loose width so... */
    bottom:0;
    min-height:0;       /* Use min- height instead */
    background:blue;
    transition: min-height 250ms ease-in;  /* target min-height respectively */
}
.maincontentdiv:hover > .slideup {  /* hover el > children selector */
    min-height: 50%;    /* and animate! */
}

Answer 2

You have to define the width&heightof the small div.The property max-height just sets a limit to the height,not defines it.

Secondly you need to hover the big div,not the small one,cause it's width and height are both 0,how can you hover it?

Demo

Hope this will do some help.;-)