How come my divs are jumping around during a transition?

Question

I have a bunch of rectangle <div> 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 :hovered box.

I have set margin-bottom: 60pxon the <div>. When the user hovers, a 40px expansion comes out below it. When this expansion comes out, I set margin-bottom: 20px. This works fine for going out, but when the the expansion goes in, it jumps.

Makes more sense after viewing the Fiddle:

Fiddle: http://jsfiddle.net/50q74j9a/2/

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.

HTML:

<div class="catalog-item" data-categories="1">
        <div class="item-title">
            <img style="visibility: hidden" src="/Content/images/white_square_icon.gif" alt="menu-icon" />
            <div style="visibility: hidden" class="favorite-icon-inactive"></div>
        </div>  <a href="#" target="_blank">
            <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" /></a>

        <div class="supplier-name">Steam Bakery</div>
        <div class="supplier-info"> <span><a href="#" target="_blank">Program Info</a></span>
    <span class="contact-info">Contact Info</span>

    </div>
</div>

Partial CSS:

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

Answer 1

It is because you are only setting the transition for the height but you are also changing the element's margin as well. Try this so they transition at the same time.

.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: all .4s;
   -webkit-transition: all .4s;
   -o-transition: all .4s;
   transition: all .4s;
   text-align: center;
}

JSFiddle

Answer 2

Instead of changing the container's height, you should add a negative margin-bottom to the sliding info box. It's less work for the browser than adjusting the height and position at the same time.

.catalog-item:hover .supplier-info {
    margin-bottom: -47px;
}

http://jsfiddle.net/aLabnvss/