CODEWITHSUNDEEP
htmlcss
AlbatrossCafe
AlbatrossCafe

Reputation: 1842

How come my divs are jumping around during a transition?

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

Upvotes: 5

Views: 2326

Answers (3)

user5319700
user5319700

Reputation: 1

add min-height for division

.catalog-item {min-height:215px;}

Upvotes: 0

imtheman
imtheman

Reputation: 4843

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

Upvotes: 5

Lyes BEN
Lyes BEN

Reputation: 1010

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/

Upvotes: 1

Related Questions