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?