Fazendo DIV Aparecer Depois de Passar o Mouse

[Teozin Bahia 0]

Eu estou com o seguinte problema eu preciso que uma div so apareça quando a sua div pai completar a transição.

 

 

Tipo.

 

Tenho uma div pai que tem tamanho 200px e vai para 400px.

 

E uma div dentro dela que está oculta, e só pode aparecer quando ele tiver 400px.

 

Como faço isso?

 

Meus Codigos:

 

/* VIDEO BOX */
.video_box {
	float:left;
	margin-right: 50px;
	margin-bottom: 40px;
	width: 239px;
	z-index: 2;
	transition-delay: 0.3s;
	transition-duration: 2s;
	
}
.video_box:hover {
	float:left;
	margin-right: 50px;
	margin-bottom: 40px;
	width: 400px;
	z-index: 2;
	
}
.video_box_top {
	background-color:#FFF;
	border-color:#F2F2F2;
	border-width:1px;
	border-style:solid;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-color:#EEEEEE;
	border-bottom-width:1px;
	width:100%;
	position:relative;
	height:50px;
	padding-top: 11px;
	padding-left: 11px;
}
h1 {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:50%;
	color:rgb(116,116,116);
	text-align:left;
	text-decoration:none;
	font-style:normal;
	font-weight:normal;
}
.like_space {
	background-image:url(../img/like_icon.png);
	background-repeat:no-repeat;
	width:40px;
	height:21px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:120%;
	color:rgb(115,115,115);
	text-align:left;
	padding-left: 29px;
	float:left;
}
.comment_space {
	background-image:url(../img/comment_icon.png);
	background-repeat:no-repeat;
	width:40px;
	height:24px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:120%;
	color:rgb(115,115,115);
	text-align:left;
	padding-left: 29px;
	float:left;
}
.view_space {
	background-image:url(../img/view_icon.png);
	background-repeat:no-repeat;
	width:40px;
	height:16px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:120%;
	color:rgb(115,115,115);
	text-align:left;
	padding-left: 29px;
	float:left;
}
.video_box_cont {
	background-color:#FFF;
	width:-webkit-calc(100% - 11px);
	position:relative;
	height:auto;
	border-left-color:#F2F2F2;
	border-left-style:solid;
	border-left-width:1px;
	border-right-color:#F2F2F2;
	border-right-style:solid;
	border-right-width:1px;
	padding-top: 11px;
	padding-left: 22px;
}

.video_box_bot {
	background-color:#FFF;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-bottom-color:#EEEEEE;
	border-bottom-width:1px;
	border-left-color:#EEEEEE;
	border-left-width:1px;
	border-right-color:#EEEEEE;
	border-right-width:1px;
	width:-webkit-calc(100% + 3px);
	position:relative;
	height:28px;
	padding-top: 11px;
	padding-left: 11px;
}



/* QUANDO MOUSE PASSAR POR CIMA DA CAIXA - VIDEO BOX */

.button_assistir {
	background-color:rgb(247,247,247);
	width:145px;
	height:33px;
	padding: 0px;
	margin-left: -36px;
	border-color:rgb(204,204,204);
	border-width:1px;
	border-style:solid;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:rgb(116,116,116);
	text-align:center;
}
.p {
	margin-left:-30px; width: 140px; font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:120%;
	color:rgb(114,114,114);
	text-align:center;
}

.video_box_cont_cont {
	float:left;
}
#autor_info {
	float:left;
	margin-left: 50px;
	
}
#video_box #autor_info{display:none; transition-duration: 3s;}
#video_box:hover #autor_info{display:block;}

 

   <div id="video_box" class="video_box">
                    <div class="video_box_top"> 
                            <h1>Geometria Molecular ~ Quimica</h1>
                            <div class="like_space">13</div> <div class="comment_space">13</div> <div class="view_space">13</div>
                    </div>
                    
                   
                	    <div class="video_box_cont">
                           <div class="video_box_cont_cont">
    							<img src="img/video_teste.png" alt="Descrição do Video" width="208" height="193" />
           				    </div>

          					<div id="autor_info" > <!-- DIV QUE ESTÁ OCULTA E TEM QUE APARECER -->
                                <img src="img/avatar_icon.png" alt="Autor da Materia - Geometria Molecular ~ Quimica" width="80" height="80"/>
                                <br />
                                  <p class="p"> Teo Cardoso (50pts) </p>
                                <button class="button_assistir"> Assistir Video-Aula </button>
                       		</div>
                      		<br style="clear:both" />  
                    </div>
                    <div class="video_box_bot"></div>
                </div>
                

 

 

Deu para entender?

[YFilus 14]

Olá Teozin, tudo bem?

 

Você está usando jQuery em sua página?

Geralmente para esse tipo de transições acabo o usando, já que o suporte para CSS3 nos IEs é triste.

 

Ficaria mais ou menos assim:

 

$('.video_box').hover(function() {
	$(this).animate({width: "400px"}, 300, function() {
		$(this).find('#autor_info').fadeIn();
	});
}, function() {
	$(this).animate({width: "239px"}, 300).find('#autor_info').fadeOut();
});

Qualquer coisa grite!