transition and child node css

Question

I cant understand why child div showed without fadein effect? I need when I hover on div ("black") then div (red) gradually appeared.. How do it?

Fiddle

HTML

<div class="main">
    <div class="ok"></div>  
</div>

CSS

.main {
    width: 200px;
    height: 200px;
    background: black;
}
.ok {
    width: 50px;
    height: 50px;
    background: red;
    display: none;
    -webkit-transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
    display: block;
}

Thanks

Answer 1

You can't apply the transition when changing the display property:

Transitions on the display: property

Just remove the display part, and it will work:

.ok {
    width: 50px;
    height: 50px;
    background: red;    
    transition: opacity 1s linear;  
    opacity: 0;
}
.main:hover .ok{ 
    opacity: 1;
}

Fiddle: http://jsfiddle.net/sGxgv/1/