css - Hide text until HTML element expands to reveal it? -

i have div expands height of 50px 125px upon hovering on it. want put text , image @ bottom of div hidden until div expands , revealed expansion rolls on it. expanding syntax have in css:

.home { height:50px; width:100px; display:inline-block; position:relative; z-index:1; transition: height .5s ease-in-out; -webkit-transition: height .5s ease-in-out; }  .home:hover { height 150px; } 

could point me in right direction on how this?

all need add overflow:hidden .home class definition. add colon after height in .home:hover class.

.home { height:50px; width:100px; display:inline-block; position:relative; z-index:1; transition: height .5s ease-in-out; -webkit-transition: height .5s ease-in-out; overflow:hidden; }