Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)

Question

I'd like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover.

The caveat being that I wish to keep dynamic (auto) height.

It seems that the optimal route would be to transition between a fixed height:0, to a height:auto, but alas this is not yet supported by transitions in browsers.

A clarification in response to the comments :: This isn't so much a question of waiting until all living browsers are CSS3 compatible, but rather addressing a perceived shortcoming of CSS3 itself (eg. the lack of height:0 > height:auto)

I've explored a few other ways, which can be viewed at the following fiddle (and elaborated below), but none of them satisfy me, and I'd love feedback/tips for other approaches.

http://jsfiddle.net/leifparker/PWbXp/1/

Base CSS

.content{     -webkit-transition:all 0.5s ease-in-out;       -moz-transition:all 0.5s ease-in-out;     transition:all 0.5s ease-in-out;     overflow:hidden; } 

---

Variation #1 - The Max-Height Hack

.content { max-height:0px; } .activator:hover +.content{ max-height:2000px; } 

Cons

a. You'll need to arbitrarily set an upper max-height, which, with extensive dynamic content, could potentially cut off information.

b. If, as a precaution to (a), you resort to setting a very high upper max-height, the delay on animation becomes awkward, and untenable, as the browser invisibly transitions the entire distance. Also makes easing less visually effective.

---

Variation #2 - Padding and the Illusion of Growth

.content { padding:0px; height:0px; opacity:0; } .activator:hover +.content { padding:10px 0px; height:auto; opacity:1; } 

Cons

a. It's jarring. It's definitely slightly better than just popping the content out of nowhere, and the effect is further sold by transitioning the opacity, but overall it's not that visually slick.

---

Variation #3 - The Faulty Width-Only Approach

.content { width:0%; } .activator:hover +.content{ width:100%; } 

Cons

a. As the width shrinks, the line-wrap forces any extra text onto subsequent lines, and we end up with a super tall invisible div that still demands the real-estate.

---

Variation #4 - The Effective, but Jittery, Font-Size

.content {  font-size:0em; opacity:0; } .activator:hover +.content{  font-size:1em; opacity:1; } 

Cons

a. While this has a nice, sweeping sort of effect, the shifting of the line-wrap as the font grows causes unappealing jitter.

b. This only works for content consisting of text. Other transitions would need to be added to manage the scaling of inputs, and images, and while entirely viable, this would erode the simplicity.

---

Variation #5 - The Butteriness of Line-Height

.content { line-height:0em; opacity:0; } .activator:hover +.content{ line-height:1.2em; opacity:1; } 

Cons

a. My favorite aesthetically, but as with #4, this works most simply with text-only content.

---

Variation #6 - The Anti-Margin (as offered by @graphicdivine)

.wrapper_6 { min-height: 20px } .wrapper_6 .activator {z-index:10; position: relative} .wrapper_6 .content { margin-top: -100%; } .wrapper_6 .activator:hover +.content{ margin-top: 0 } 

Cons

a. There is a delay on hover which is not optimal. This is the result of the .content being tucked invisibly quite far up the screen, and taking time to animate downwards before appearing.

b. The margin-top: -100% is relative to the containing element's width. So, with fluid designs there's the potential that when the window is shrunk quite small, the margin-top wont be sufficient to keep the .content hidden.

---

As I said before, if only we could transition between height:0 and height:auto, this would all be moot.

Until then, any suggestions?

Thanks! Leif

Answer 1

Try this, The anti-margin:

.wrapper_6 { min-height: 20px } .wrapper_6 .activator {z-index:10; position: relative} .wrapper_6 .content { margin-top: -100%; } .wrapper_6 .activator:hover +.content{ margin-top: 0 } 

http://jsfiddle.net/PWbXp/

Answer 2

Well... I know it's been awhile, but I needed to use a height animation, and believe that a lot of other programmers still need or/and will need to do it.

So, I fell here because I needed to show mode details of a product description inside a cell-table when user hovers the cell. Without user hovering, only the maximum of 2 lines of description are shown. Once user hovers it, all lines (text can be since 1 to 8 lines, dynamic and unpredictable length) must be show with some kind of height animation.

I come to the same dilemma, and choose to use the max-height transition (setting a high max-height, which I was sure that will not cut my text), because this approach appears to me to be the cleanest solution to animate the height.

But I couldn't be satisfied with the delay on the "slide up" animation, just like You.
That's when I found a commentary about transition curve here: http://css3.bradshawenterprises.com/animating_height/ .

The Idea of this guy is brilliant, but just this solution alone "cut-off" the effect of "slide down" animation. So thinking a little I just come to a final solution.

So here is my solution using the Rhys's Idea (Guy of link above):

Slide Down Animation (Hover), with a "smooth grow", and Slide Up Animation without (virtually) "delay":

div {    background-color: #ddd;    width: 400px;    overflow: hidden;    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);    transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);    max-height: 38px;  }  div:hover {    -webkit-transition: max-height 2s ease;    -moz-transition: max-height 2s ease;    transition: max-height 2s ease;    max-height: 400px;  }

<div>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis    placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.  </div>

Here is a Simple JsFiddle

And Here is your JsFiddle updated (slice of it, indeed)

This is a perfect (in my opinion) solution for menu, descriptions and everything that isn't extremely unpredictable, but as You pointed before, there is the need to set up a high max-height, and may cut-off a surprisingly tall dynamic content. In this specific situation, I'll use jQuery/JavaScript to animate the height instead. Since the update of the content will be done using some sort of JavaScript already, I can't see any harm using a Js approach to animation.

Hope I helped somebody out there!