Transition hover annule le code

Bonjour,

Je viens vous voir, parce que j'ai un petit problème avec une transition! Je m'explique en simplifiant:
J'ai deux éléments: A (qui correspond à cadre_nom)et B (qui correspond à cadre_test)qui fonctionnent parfaitement, mais dès que j'ajoute une transition à l'élément A, et le B s'annule, ce qui ne me facilite absolument pas la tâche! Quelqu'un pourrait-il me dire d'où vient le problème?

Merci d'avance! :D

P.S: Merci de ne pas copier le code ;)

#cadre_general{
width:530px;
/*box-shadow*/
-webkit-box-shadow:0px 0px 80px #AC1602 inset;
   -moz-box-shadow:0px 0px 80px #AC1602 inset;
        box-shadow:0px 0px 80px #AC1602 inset;
margin:1% auto;
border-left:3px double black;
border-right:3px double black;
min-height:500px;
padding:15px;
}
div.cadre_vava{
position:relative;
width:500px;
height:285px;
margin:15px auto;
overflow:hidden;
}
div.cadre_nom{
position:absolute;
width:500px;
height:18px;
top:-1em;
text-align:center;
color:white;
background:rgba(0,0,0,0.6);
/*transition*/
-webkit-transition:all 1.2s;
   -moz-transition:all 1.2s;
     -o-transition:all 1.2s;
        transition:all 1.2s;
font-family:Parchment;
font-size:50px;
padding:20px;
margin-top:50px;
overflow:hidden;
}
div.cadre_histoire{
text-align:justify;
font-family:Trebuchet MS;
height:190px;
overflow:auto;
font-size:12px;
width:460px;
}
div.cadre_nom:hover{
height:220px;
background:rgba(0,0,0,0.8);
}
div.cadre_test{
height:200px;
width:250px;
border:2px solid black;
}

<div id="cadre_general">  
  <ul>    
    <li style="list-style:none">      
      <div class="cadre_vava">        
        <div class="cadre_nom">Blabla           
          <div class="cadre_histoire">Blabla           
          </div>        
        </div>      
      </div>    
    </li>  
  </ul>  
  <div class="cadre_test">Test   
  </div>
</div>