Moving divs from bottom in css wrapper
I have a specific problem that I am stuck on.
I have a square that has an image and text. What I need to do is when the window hovers, the text that is hidden should appear at the bottom and push the image up (overflow: hidden on the wrapper will disable it). The text is arbitrary length and the action must be css only (no javascript)
html:
<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 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 example: http://jsfiddle.net/a136ddj8/2/
(if you can't see anything on hover remove the overflow: hidden from the wrapper class)
Any ideas on how to achieve this? Is it possible?
source to share
In this case, you can use an additional 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 standard dummy text ever since the 1500s,</div>
</div>
</div>
Then with CSS you can position this extra container as absolute in order to perform the push effect ... Also you cannot animate height
to automatically 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 standard dummy text ever since the 1500s,</div>
</div>
</div>
source to share
Playback using position properties.
Here is a demo
.wrapper {
width:200px;
height:200px;
border: 1px solid red;
overflow:hidden;
}
.content {
overflow:hidden;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
position:relative;
padding:20px;
top:0
}
.wrapper:hover .content {
height:auto;
top:-200px;
}
.image img{ position:relative;transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; top:0;}
.wrapper:hover img { top:-200px;}
<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 standard dummy text ever since the 1500s,</div>
</div>
Positioning with css will do the animation. Here's a demo.
source to share
First of all, you can make it a little more semantic by using number and drawing. But then you are limited to a few things. If you want to do this without javascript, you will be limited to a fixed height on the container. Here's a snippet:
.slide-up-caption { /* main figure element, requires fixed height */
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.slide-up-caption img { display: block } /* clears spacing issues */
.slide-up-caption-inner { /* wrapper around img and caption that sticks to bottom */
position: absolute;
bottom: 0;
left: 0;
}
.slide-up-caption figcaption {
height: 0;
padding: 0 .5em; /* no padding on top & bottom to make it hidden completely */
background: black;
color: white;
-webkit-transition: all .25s; /* transition just for fun */
-moz-transition: all .25s;
transition: all .25s;
}
.slide-up-caption:hover figcaption {
height: auto; /* only think you really need here */
padding: .5em; /* add padding for style */
-webkit-transition: all .25s; /* transition for fun */
-moz-transition: all .25s;
transition: all .25s;
}
<figure class="slide-up-caption">
<div class="slide-up-caption-inner">
<img src="http://placehold.it/200x200" alt="placeholder img">
<figcaption>This is demo content.</figcaption>
</div>
</figure>
source to share
This should get you on the right track. Obviously, you'll want to play with style. The main thing is to use positioning, not height.
http://jsfiddle.net/wilchow/a136ddj8/5/
* {
box-sizing: border-box;
}
.wrapper {
width:200px;
height:200px;
border: 1px solid red;
overflow:hidden;
position:relative;
}
.content {
transition: all 0.5s ease;
width: 200px;
height: 200px;
position: absolute;
top: 210px;
margin:0;
padding: 5px;
}
.wrapper:hover .content {
height:auto;
position: absolute;
top: 10px;
}
source to share