CODEWITHSUNDEEP
htmlcssanimationtransition
BR89
BR89

Reputation: 716

CSS transition animation not displaying

Ello all. Thanks for reading and responding!

I am trying to alter the height over a div on hover to show more content that's cutoff by an overflow:hidden (tried text-overflow ellipsis but that failed miserably.. different task though!) I have the hover property working fine, however I'd like to include a transition animation as just jumping open a div is quite distracting. Alas no such luck.

Can't quite figure out where I'm failing though.

.technique_container{
width: 595px;
height: auto;
}

.techpic {
padding: 15px 0px 5px 10px;
width: 15%;
float: left;
height: 100px;
}
.techpic img {border-radius: 15%; margin-top: 15px;}

.technique {
width: 80%;
margin-left: 110px;
height: 118px;
overflow: hidden;
transition: height 1.0s; /* Animation time */
    -webkit-transition: height 1.0s; /* For Safari */
}

.technique:hover {height: auto;}

Seems like a basic CSS property but something is missing?

Also this is a great resource http://jsfiddle.net/BenedictLewis/K6zCT/ :)

Thanks!

Upvotes: 1

Views: 96

Answers (2)

jczimm
jczimm

Reputation: 363

As @BR89 said, you cannot transition an element to a height of auto, but you can transition it to a max-height. 

.technique {
    width: 80%;
    margin-left: 110px;
    max-height: defaultHeight;
    overflow: hidden;
    transition: max-height 1.0s; /* Animation time */
    -webkit-transition: max-height 1.0s; /* For Safari */
}

.technique:hover {max-height: someLargeNumber;}

Note: someLargeNumber must exceed .technique's maximum possible height (ie. 9999px)

(http://css3.bradshawenterprises.com/animating_height/)

Upvotes: 1

calvin
calvin

Reputation: 479

You can't transition to height:auto;. I've had some success transitioning max-height instead (replacing height:auto with max-height:900px; or some number that definitely is greater than the intended height).

Upvotes: 2

Related Questions