How to perform same Transition on Parent/Child DIVs simentously

Question

I am trying to create two transition effects on a Div Hover. First a circle will draw and a text will also come along with the circle.

I have written the following code, and it first draws the circle, then draws the text. I want both things to happen sententiously. Kindly check my code and guide me.

JSFIDDLE

<div class="outer"> 
    <div class="inner"> 
        <div class="text">  Description </div>
    </div>
</div>

CSS

    <style>
    body
    {
        background-color:black;
    }

    .outer
    {
        background-color:green;
        position:absolute;
        top:50px;
        height:200px;
        width:200px;
        border-radius:50%;
        border:10px solid white;
        overflow:hidden;



    }

    .inner
    {
        background-color:silver;
        opacity:0.2px;
        position:absolute;
        top:0px;
        height:0px;
        width:200px;
        border-radius:60%;
        visibility:hidden;

    }


.text
{   
        background-color:silver;
        opacity:0.2px;
        position:absolute;
        top:0px;
        height:0px;
        width:200px;
        line-height:0px;
        visibility:hidden;
}       

    .outer:hover >.inner
    {
        #line-height:10px;
        text-align:center;
        opacity:0.2px;
        height:200px;
        width:200px;

        transition:height 2s;
        transition-timing-function: ease-in;
        visibility:visible;

    }


.inner:hover > .text
{

        line-height:200px;
        text-align:center;
        opacity:0.2px;
        height:200px;
        width:200px;
        #background-color:blue;

        transition:line-height 2s;
        transition-timing-function: ease-in;
        visibility:visible;


}



    </style>

Answer 1

Replace your CSS with this css:

body
{
    background-color:black;
}

.outer
{
    background-color:green;
    position:absolute;
    top:50px;
    height:200px;
    width:200px;
    border-radius:50%;
    border:10px solid white;
    overflow:hidden;
}

.inner
{
    background-color:silver;
    opacity:0.2px;
    position:absolute;
    top:0px;
    height:0px;
    width:200px;
    border-radius:60%;
    visibility:hidden;

}

.text
{
    opacity:0.2px;
    position:absolute;
    top:0px;
    height:0px;
    width:200px;
    line-height:0px;
    visibility:hidden;
}

.outer:hover > .inner
{
    line-height:10px;
    text-align:center;
    opacity:0.2px;
    height:200px;
    width:200px;

    transition:height 2s;
    transition-timing-function: ease-in;
    visibility:visible;

}

.outer:hover > .inner .text
{
    line-height:200px;
    text-align:center;
    opacity:0.2px;
    height:200px;
    width:200px;
    transition:line-height 2s;
    transition-timing-function: ease-in;
    visibility:visible;
}

Issue was with hover. Two hovers were added. outer hover and inner hover. Text was coming when inner hover was getting triggered.

inner hover is changed to

.outer:hover > .inner .text

now both will come down at same time.