css3 height transition not working

Question

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

It is possible to do an open/close effect with variable-height elements and CSS transitions with a bit of JS - see here: stackoverflow.com/a/18636883/93812 — Will Jenkins
– Will Jenkins, Commented Sep 5, 2013 at 13:01

robx · Accepted Answer · 2011-05-22 17:31:56Z

44

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.

answered May 22, 2011 at 17:31

robx

3,1132 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JCOC611 Over a year ago

There would be a problem if the number of elements (emotes) is dynamic, because the height would have to be updated.

SRN Over a year ago

is it possible for close open effect using css3 only

robx Over a year ago

that would be a problem if you add more, but keep in mind that it is still webkit ;). maybe you can try jquery to aid in dynamic height.

robx Over a year ago

@nick, i just started playing with css3 myself, but you could look into scale transition as a possibility.

Grim... Over a year ago

Sadly, in 2015 this is still the case. However, there's a workaround using max-height. More here: stackoverflow.com/questions/3508605/…

lordvcs · Accepted Answer · 2023-09-23 11:16:57Z

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://picsum.photos/seed/picsum/400/600" /> </div>

user2719233 · Accepted Answer · 2013-08-26 19:40:54Z

Instead of using a set height on a container or using JS (which are both awkward solutions)... You can put the images in list items and work your transition on the li.

If all the images are going to a similar height it means your content inside the container can still be dynamic. For example...

/* CLOSED */ div.container li { height:0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;} /* OPEN */ div.container:hover li { height:30px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}

Ry- · Accepted Answer · 2011-05-22 17:46:38Z

Here's how you can do it: http://jsfiddle.net/minitech/hTzt4/

To keep a flexible height, JavaScript is a necessity, unfortunately.

Dhruvang Gajjar · Accepted Answer · 2023-06-14 13:16:33Z

Using grid you can use transition without adding specific height to the element.

document.querySelector("button").addEventListener("click", e => { document.querySelector(".wrapper").classList.toggle("open") })

.content{ min-height: 0; text-align: justify; } .wrapper{ display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms; width: 300px; } .wrapper.open { grid-template-rows: 1fr; }

<button>Toggle</button> <div class="wrapper"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quantum Aristoxeni ingenium consumptum videmus in musicis? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Quamquam tu hanc copiosiorem etiam soles dicere. Hoc est non modo cor non habere, sed ne palatum quidem. Non est ista, inquam, Piso, magna dissensio. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quod cum dixissent, ille contra. </div> </div>

BossySmaxx · Accepted Answer · 2021-03-30 23:07:38Z

well I'm using this method: use max height to transition height instead of the height directly... for example:

div { height: auto; max-height:0; } .toggle-above-div:hover div { max-height:0; }

Collectives™ on Stack Overflow

css3 height transition not working

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related