html - Move divs up from bottom in wrapper with css -

i have specific problem i'm stuck at.

i have square, in there picture , text. need is, when box hovered, text, hidden, should appear bottom , push image (overflow:hidden on wrapper cut off). text arbitrary length, , action should css-only (no javascript)

the html is:

<div class="wrapper">     <div class="image"><img src="http://placehold.it/200x200" /></div>     <div class="content">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s,</div> </div> 

and css:

.wrapper {     width:200px;     height:200px;     border: 1px solid red;     overflow:hidden; }  .content {     height:0;     overflow:hidden;     transition: 0.5s ease; }  .wrapper:hover .content {      height:auto;    } 

(this sample)

here jsfiddle of it: http://jsfiddle.net/a136ddj8/2/

(if not see on hover, remove overflow:hidden wrapper class)

any ideas on how achieve this? possible?

in case can use extra-wrapper:

<div class="wrapper">     <div class="wrap">       <div class="image"><img src="http://placehold.it/200x200" /></div>       <div class="content">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s,</div>     </div> </div> 

then css can position container absolute acomplish push effect...also can't animate height auto instead use fixed value on max-height.

.content {     max-height:0;     transition: 0.5s ease;     overflow:hidden; } .wrapper:hover .content {      max-height:500px;    } 

check snippet below

.wrapper {    width: 200px;    height: 200px;    border: 1px solid red;    position: relative;    overflow: hidden;  }  .wrap {    position: absolute;    bottom: 0;    width: 100%;    min-height: 100%;  }  .image img {    vertical-align: middle;  }  .content {    max-height: 0;    transition: 0.5s ease;    overflow: hidden;  }  .wrapper:hover .content {    max-height: 500px;  }

<div class="wrapper">    <div class="wrap">      <div class="image">        <img src="http://placehold.it/200x200" />      </div>      <div class="content">lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s,</div>    </div>  </div>