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

http://robertnyman.com/2010/04/27/using-css3-transitions-to-create-rich-effects/ — Jawad, May 22 '11 at 17:32
It is possible to do an open/close effect with variable-height elements and CSS transitions with a bit of JS - see here: http://stackoverflow.com/a/18636883/93812 — Will Jenkins, Sep 05 '13 at 13:01

score 42 · Accepted Answer · answered May 22 '11 at 17:31

42

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 '11 at 17:31

robx

3,093
2
26
29

17

There would be a problem *if* the number of elements (emotes) is dynamic, because the height would have to be updated. – JCOC611 May 22 '11 at 17:35
is it possible for close open effect using css3 only – SRN May 22 '11 at 17:37
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 May 22 '11 at 17:38
@nick, i just started playing with css3 myself, but you could look into scale transition as a possibility. – robx May 22 '11 at 17:45
Sadly, in 2015 this is still the case. However, there's a workaround using max-height. More here: http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Grim... Oct 06 '15 at 12:12

lordvcs · Answer 2 · 2018-11-16T01:57:57.183

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>

score 3 · Answer 3 · answered Aug 26 '13 at 19:40

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;}

score 2 · Answer 4 · answered May 22 '11 at 17:46

2

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

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

answered May 22 '11 at 17:46

Ry-

218,210
55
464
476

score 0 · Answer 5 · answered Mar 30 '21 at 23:07

0

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;
  }

answered Mar 30 '21 at 23:07

BossySmaxx

37
7

score 0 · Answer 6 · answered Jun 14 '23 at 13:16

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>

css3 height transition not working

6 Answers6

Linked