Move divs up from bottom in wrapper with css

Question

I have a specific problem which I'm stuck at.

I have a square, in which there is a picture and text. What i need to do is, when the box is hovered, the text, which is hidden, should appear from bottom and push the image up (overflow:hidden on the wrapper will cut it off). The text is arbitrary length, and the action should be 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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</div>

And the css:

.wrapper {
    width:200px;
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}

.content {
    height:0;
    overflow:hidden;
    transition: all 0.5s ease;
}

.wrapper:hover .content {
     height:auto;   
}

(this is just a sample)

Here is a jsFiddle of it: http://jsfiddle.net/a136ddj8/2/

(if you do not see anything on hover, remove the overflow:hidden from the wrapper class)

Any ideas on how to achieve this? Is it even possible?

Answer 1

In this case you can use an extra-wrapper:

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

Then with CSS you can position that extra container absolute to acomplish the push effect...Also you can't animate height to auto instead use a fixed value on max-height.

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

Check the 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: all 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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>