CSS3 hidden div fade on in hover?

Question

I have my jsfiddle here.

http://jsfiddle.net/xC5wN/

I basically want the hidden div to slide open when about is hovered over with a mouse. It's going to be a part of a navigation bar and the description of the page will slow below.

I've tried using

-webkit-transition: all 0.5s ease-in-out;

to no avail. Here is my code:

.aboutnav {
    background-color: #a661ca;
}
.aboutcontents {
    display: none;
}
.aboutnav:hover .aboutcontents {
    display: block;
    background-color: #a661ca;
}

Answer 1

LIVE DEMO

.aboutnav {
  background-color: #a661ca;
  overflow:hidden;

  max-height:60px;
  transition: max-height 1s;
  -webkit-transition: max-height 1s;
}
.aboutnav:hover {
  max-height:180px;
  /* Don't exagerate with this one,
  otherwise the initial animation will not be noticable,
  just set it to a preferred maximal height. */
}

Answer 2

You can't add a transition for display. You'll want to consider hiding and showing the content by other means, such as max-height and opacity. You'll want to set the non-zero max-height value to be something large, so you don't accidentally clip your content.

Demo

.aboutnav {
    background-color: #a661ca;
}

.aboutcontents {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
}

.aboutnav:hover .aboutcontents {
    max-height: 200px;
    opacity: 1;
}

Answer 3

You should change the margin-top of .aboutcontents to make it slide. As a default .aboutcontents is hidden behind .aboutnav, hovering on .aboutnav, .aboutcontents slides down.

Here's a demo

/* margin and padding reset */
* {
   margin:0;
   padding:0;
}

h4 {
    background-color: #a661ca;
}

.aboutcontents {
    background-color: #a661ca;
    display: block; /* required for setting margin-top */
    margin-top: -100px;
    position: relative;
    z-index:-1;
   transition: margin 0.5s ease-in-out;
}

.aboutnav:hover .aboutcontents {
    margin-top: 0px;    
}