4

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?

4 Answers 4

9

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>

0
3

Play with position properties.

Here is the 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's standard dummy text ever since the 1500s,</div>
</div>

Positioning with css will make the animation. Here is the demo.

1

First of all, you could make this a little more semantic by using a figure and figure caption. But then, you're limited by a couple of things. If you want to do this without javascript, you'll 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>

0

This should lead you the right way. Obviously, you'll want to play with the styling. The main thing is using 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;
}
1
  • 2
    I just noticed you wanted to push the image up. @Danko has it correct.
    – Wil
    Commented Nov 19, 2014 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.