Animacion div css transition

Hola, tengo una consulta para hacerles.

Tengo dos capas, en una tengo una imagen 01.jpg (230 x 355px) que queda fija y en la otra 02.png que es un texto con transparencia (230 x 66px) y el div con color de fondo. La idea es que al pasar el mouse por 01.jp o 02.png esta ultima suba 80 px y crezca en altura el div.

Estuve probando haciendo lo siguiente:

Código :

<div id="imagen01">
<img src="01.jpg" width="230" height="355" /> </div>
<div id="texto"><img src="mascara.gif" width="230" height="66" style="background-image:url(TXT.png); alt="" /></div>

css:

Código :

<style type="text/css">
#imagen01 {
   float: left;
   width: 230px;
   height: 355px;
   clear: left;
   position: relative;
   background-color: none;
   top: 0px;
   left: 0px;
   z-index: 1;
}
#texto {
   float: left;
   width: 230px;
   height: 66px;
   clear: left;
   position: relative;
   bottom: 150px;
   top: -80px;
   left: 0px;
   background: rgba(0, 0, 0, .5);
   z-index: 1000;
   -webkit-transition: all 1s ease 0.5s;
   -moz-transition: all 1s ease 0.5s;
   -ms-transition: all 1s ease 0.5s;
   -o-transition: all 1s ease 0.5s;
   transition: all 1s ease 0.5s;
}

#texto:hover {
   bottom: 10px;
   height: 100px;
}


</style>

La animacion la hace al pasar el mouse sobre 02.png, pero el div crece hacia abajo, la idea es que suba el texto y crezca el fondo, no se si me explico.

Dejo dos imagenes para intentar explicarme.

Normal:



Al hacer hover:

En el hover de #texto en vez de usar bottom, usa top: -90px;

Que tonto fui, al poner en negativo dentro del panel de css transition no me dejaba y no lo había probado cambiando directamente desde el codigo css. Toqueteando el top y el height quedo bien, pero esto solo funciona al hacer hover sobre la imagen 02, como hago que tambien sea la misma animacion para cuando hacer hover sobre la img 01?