Kutu Animasyonla Büyürken İçeriği Değişsin

[noktakom]

Bir kutu varsayalım,

Kod Seç Genişlet

<div id="kutu">
<h1>Başlık</h1>
</div>

Bu kutuyu animasyonla büyütüyorum.

Kod Seç Genişlet

#kutu{
width:150px;
height:150px;
border: 1px solid black;
margin: 10px;
text-align:left;
       -webkit-transition: -webkit-transform 0.5s;
}

#kutu:hover{
-webkit-transform: scale(2,1.5) translate(38px, 26px);
}

İstediğim şey ise, başlıkta da belirttiğim gibi, kutu büyürken içeriğinin değişmesi. Yani kutu küçükken içerisinde başlık yazacak, büyüyünce kutu içerisinde daha ayrıntılı bir yazı belirecek. Bunu nasıl yapabilirim? html5, css3 ve js üçlüsü ile mümkünse.