CSS3 transition doesn't work with display property [duplicate]

Question

I have been trying to use css to show a Hidden Div fade in whenever I hover its parent element.

So far all I have managed to do was to get the hidden div to show, but there are no easing transitions what so ever.

Here is my Code on JSfiddle http://jsfiddle.net/9dsGP/

Here is my Code:

HTML:

<div id="header"> <div id="button">This is a Button     <div class="content">     This is the Hidden Div     </div> </div> </div> 

CSS:

#header #button {width:200px; background:#eee}  #header #button:hover > .content {display:block; opacity:1;}  #header #button .content:hover { display:block;}  #header #button .content {  -webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s;      opacity:0;     clear: both;     display: none;      top: -1px;     left:-160px;     padding: 8px;     min-height: 150px;     border-top: 1px solid #EEEEEE;     border-left: 1px solid #EEEEEE;     border-right: 1px solid #EEEEEE;     border-bottom: 1px solid #EEEEEE;     -webkit-border-radius: 0px 7px 7px 7px;     -moz-border-radius: 0px 7px 7px 7px;     -khtml-border-radius: 0px 7px 7px 7px;     border-radius: 0px 7px 7px 7px;     -webkit-box-shadow: 0px 2px 2px #DDDDDD;     -moz-box-shadow: 0px 2px 2px #DDDDDD;     box-shadow: 0px 2px 2px #DDDDDD;     background: #FFF; } 

Any clue as to what Im doing wrong? Just trying to get a smooth effect for the hidden content when I hover over the button. Thanks in advance!

Answer 1

display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead.
- reference

As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:

#header #button:hover > .content {     opacity:1;     height: 150px;     padding: 8px;     }  #header #button .content {     opacity:0;     height: 0;     padding: 0 8px;     overflow: hidden;     transition: all .3s ease .15s; } 

(Vendor prefixes omitted due to brevity.)

Here is a working demo. Also here is a similar topic on SO.

#header #button {    width:200px;    background:#ddd;    transition: border-radius .3s ease .15s;  }    #header #button:hover, #header #button > .content {      border-radius: 0px 0px 7px 7px;  }    #header #button:hover > .content {    opacity: 1;    height: 150px;    padding: 8px;      }    #header #button > .content {    opacity:0;    clear: both;    height: 0;    padding: 0 8px;    overflow: hidden;      -webkit-transition: all .3s ease .15s;    -moz-transition: all .3s ease .15s;    -o-transition: all .3s ease .15s;    -ms-transition: all .3s ease .15s;    transition: all .3s ease .15s;      border: 1px solid #ddd;      -webkit-box-shadow: 0px 2px 2px #ddd;    -moz-box-shadow: 0px 2px 2px #ddd;    box-shadow: 0px 2px 2px #ddd;    background: #FFF;  }    #button > span { display: inline-block; padding: .5em 1em }

<div id="header">    <div id="button"> <span>This is a Button</span>      <div class="content">        This is the Hidden Div      </div>    </div>  </div>