title: How come my divs are jumping around during a transition?
body: <p>I have a bunch of rectangle <code>&lt;div&gt;</code> elements that I am using to display some companies. When you hover over the element, it displays an extra couple of boxes containing clickable links below the rectangle. When the user stops hovering, those boxes go away. The problem is, the UI is very jumpy if there are other boxes below this <code>:hovered</code> box.</p>
  
  <p>I have set <code>margin-bottom: 60px</code>on the <code>&lt;div&gt;</code>. When the user hovers, a 40px expansion comes out below it. When this expansion comes out, I set <code>margin-bottom: 20px</code>. This works fine for going out, but when the the expansion goes in, it jumps. </p>
  
  <p><em>Makes more sense after viewing the Fiddle:</em></p>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/50q74j9a/2/" rel="noreferrer">http://jsfiddle.net/50q74j9a/2/</a></p>
  
  <p>I would like it to not jump around when the user stops hovering over a box. I know it has something to do with the transition, I just don't know how to fix it.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="catalog-item" data-categories="1"&gt;
          &lt;div class="item-title"&gt;
              &lt;img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" /&gt;
              &lt;div style="visibility: hidden" class="favorite-icon-inactive"&gt;&lt;/div&gt;
          &lt;/div&gt;  &lt;a href="#" target="_blank"&gt;
              &lt;img class="supplier-logo" src="http://vignette4.wikia.nocookie.net/cswikia/images/d/d6/Steam_logo_2014.png/revision/latest?cb=20140910122059" alt="Steam Bakery logo" /&gt;&lt;/a&gt;
  
          &lt;div class="supplier-name"&gt;Steam Bakery&lt;/div&gt;
          &lt;div class="supplier-info"&gt; &lt;span&gt;&lt;a href="#" target="_blank"&gt;Program Info&lt;/a&gt;&lt;/span&gt;
      &lt;span class="contact-info"&gt;Contact Info&lt;/span&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Partial CSS:</strong></p>
  
  <pre><code>.catalog-item {
      width: 150px;
      height: 175px;
      margin-right: 20px;
      /*margin-bottom: 20px;*/
      margin-bottom: 60px;
      background-color: white;
      border: 1px solid #0E80B4;
      display: inline-block;
      vertical-align: top;
      position: relative;
      -moz-transition: height .4s;
      -webkit-transition: height .4s;
      -o-transition: height .4s;
      transition: height .4s;
      text-align: center;
  }
  .catalog-item:hover {
      height: 215px;
      margin-bottom: 0;
  }
  </code></pre>