This is a really common thing to want to do, and when you know the trick it's really easy! The short version is, you can't animate from 0 to auto using transitions. You have to have a height at the end. However, all is not lost…

This is some content that could be any length. In fact, click on it to edit it in place.

Hover over the grey box.

So, how did that work? We aren't animating height, we are animating max-height. By setting that to a large value, and setting our overflow to be hidden, we can do what we need.

Simplified CSS

.our_content {
	/* Initially we don't want any height, and we want the contents to be hidden */
	max-height: 0;
	overflow: hidden;

	/* Set our transitions up. */
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;
}
.outside_box:hover .our_content {
	/* On hover, set the max-height to something large. In this case there's an obvious limit. */
	max-height: 200px;
}

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin