Menu
i have a problem using css3 transitions how can i make the transition smooth it appears instantly
i want the div box to slowly change its height when i hover over it
the html code
<div id="imgs"> <img src="http://chat.ecobytes.net/img/emoticons/smile.png" alt=":)" title=":)" /> <img src="http://chat.ecobytes.net/img/emoticons/sad.png" alt=":(" title=":(" /> <img src="http://chat.ecobytes.net/img/emoticons/wink.png" alt=";)" title=";)" /> <img src="http://chat.ecobytes.net/img/emoticons/razz.png" alt=":P" title=":P" /> <img src="http://chat.ecobytes.net/img/emoticons/grin.png" alt=":D" title=":D" /> <img src="http://chat.ecobytes.net/img/emoticons/plain.png" alt=":|" title=":|" /> <img src="http://chat.ecobytes.net/img/emoticons/surprise.png" alt=":O" title=":O" /> <img src="http://chat.ecobytes.net/img/emoticons/confused.png" alt=":?" title=":?" /> <img src="http://chat.ecobytes.net/img/emoticons/glasses.png" alt="8)" title="8)" /> <img src="http://chat.ecobytes.net/img/emoticons/eek.png" alt="8o" title="8o" /> <img src="http://chat.ecobytes.net/img/emoticons/cool.png" alt="B)" title="B)" /> <img src="http://chat.ecobytes.net/img/emoticons/smile-big.png" alt=":-)" title=":-)" /> </div> jsfiddle
708
We can't transition height , but we can transition max-height , since it has an explicit value. At any given moment, the actual height of the element will be the minimum of the height and the max-height .
For animate the "height" of element with CSS Transitions you need use "max-height". If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.
I believe you need to set a specified height instead of auto. http://jsfiddle.net/BN4Ny/ this does a smooth expansion. Not sure if you wanted that little close open effect though. I just forked your jsfiddle and added a specified height.
88
This solution does not need javascript or have the problem of needing to have a fixed height for the container before hand.
This is made possible by using max-height property and setting its value to a high value.
#imgs { border:1px solid #000; border-radius:3px; max-height:20px; width:100%; overflow:hidden; transition: 2s ease; } #imgs:hover { max-height:15em; }<div id="imgs"> <img src="https://sslb.ulximg.com/image/405x405/artist/1346353449_4159240d68a922ee4ecdfd8e85d179c6.jpg/e96a72d63f272127d0b6d70c76fd3f61/1346353449_eminem.jpg" /> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
