How come my divs are jumping around during a transition?


Tags: html,css,html5,css3

Problem :

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


Solution :

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


    CSS Howto..

    JavaScript or CSS: How can I make a transition of one element to another?

    How to give different views for same url for different devices with same resolution?

    Tab menu in CSS - how to set an active tab

    How to position text on image using position as absolute while container width being in percent

    How can I affect Opacity of an image whilst hovering a div?

    How can i repeat the image rollover and have multiple aligned underneath on my website?

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How to make images always relative to a div using CSS

    How to make a DIV float on top of another DIV without pushing down the CSS Underneath

    How to reorganize the page using “div” and “css”?

    How to display “a” to full of the line

    SASS: normalize.css works, but does not show up in compiled CSS file?

    How to I apply a style to only the first row (matching a class) of a table using pure css?

    How to stretch line between two cells ( tags)

    How to prevent css borders from floating to the top of parent div

    How to style default confirm box with only css?

    How to add Video from project directory in the background of Div

    How do I resize an image size automatically loaded in different browsers and screen size?

    How to remove critical CSS from the main.css file

    How do I set the height of a parent to auto minus pixels?

    How to remove simple text from HTML/HAML

    How do I get these hover effects but with diamonds instead of circles

    How to draw a specific shape in CSS? [closed]

    How to display a background image with a:hover

    How to apply a css class for jqGrid height property setGridHeight?

    How to align div to the bottom of another div in HTML?

    How to base the height of a

    on whether or not its parent div has an image

    How to add vertical scrollbar to sliding tab? [closed]

    How to define a set of CSS class names so Vim knows how to autocomplete

    How do I show divs in an IE print preview page that are programmatically hidden via javascript?