How to show transition of an element that is expanding over nearby content?


Tags: css,css3,css-transitions

Problem :

Ok, so in theory this should be easy, but it didn't work quite like I would have expected.

I have a list of iline-block elements and upon hovering over them, I want them to expand over nearby elements.

That part is easily accomplished by making the element be positioned absolutely and giving a margin to the next element so it doesn't move...

However, I cannot for the life of me figure out how to make it animate with the transition property.

Here's an example of what I mean:

HTML:

<div id="container">
    <div class="panel">
        One
    </div>
    <div class="panel">
        Two
    </div>
    <div class="panel">
        Three
    </div>
</div>
<div class="moreContentHere">
    Something something darkside.
</div>

CSS:

#container {
    padding:0;
    margin:0;
    height:100px;
    width:600px;
    overflow:hidden;
}

#container .panel {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-right:1px solid red;

    transition:width 300ms;
    -webkit-transition:width 300ms;
    transition:height 300ms;
    -webkit-transition:height 300ms;

    z-index:1;
}

#container .panel:hover {
    position:absolute;
    width:200px;
    height:200px;
    background-color:#eee;
    z-index:2;
}

#container .panel:hover + .panel {
    margin-left:100px;
}

I've created a jsfiddle for it here: http://jsfiddle.net/yzM9q/2/

Help me Obi-Wan Kenobi, you're my only hope.

EDIT after answer: Thanks to vals below, you can view the demo of it working correctly here: http://jsfiddle.net/yzM9q/26/



Solution :

You can not make transitions in wich you change not numeric properties . (For instance, changing position relative to position absolute. What is the position 50% absolute and 50% relative ?)

So, your CSS should keep the elements position as relative. Now you are taking them out of flow; you can't. So the alternative is to give the element that is being hovered a negative right margin.

CSS

#container {
    padding:0;
    margin:0;
    height:100px;
    width:600px;
}

#container .panel {
    padding:0;
    margin:0;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-right:1px solid red;
    vertical-align: top;

    transition: width 3s, height 3s, margin-right 3s;
    -webkit-transition: width 3s, height 3s, margin-right 3s;

    z-index:1;
}

#container .panel:hover {
    width:200px;
    height:200px;
    background-color:#eee;
    z-index:2;
    margin-right: -100px;
}

demo

I have also removed the overflow hidden in the parent, just to make the height increase visible.


    CSS Howto..

    How to create this responsive grid of different sized images with CSS & HTML, example below

    How to REALLY control font size in an eBay listing [closed]

    How many digits after the decimal point are interpreted in stylesheet rules?

    How to make 1 table scrollable with fixed header without affecting other tables in Bootstrap

    How to move this circle using javascript?

    How to use the css height attribute for showing scroll bar in HTML table

    how to highlight specific control with css [duplicate]

    How to create a box when mouse over text in pure CSS?

    How can i fill a paragraph (until end of line) with dashes using CSS

    CSS how to make 100% height in this case

    How do I fix Zurb Foundation dropdown issue on mobile devices?

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to create desired shapes and position them accordingly using CSS, CSS3?

    How do I remove applied css on a div by JQuery?

    Show hint over a CSS background image on mouse over

    How to apply CSS page-break to print a table with lots of rows?

    How to apply format depending on absence of a CSS class?

    How to apply CSS styling to elements created by jquery's append()?

    CSS - how to keep images within container during browser window resize?

    How to animate the movement of inline-block items on page resize (ideally using css)?

    How to make a box with arrow in CSS?

    How to make floated right div fixed without changing the current look of the page

    Image won't show up html + css

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to remove a html table particular column to make other datas visible(responsive) using media queries?

    How can I zoom this gallery without moving the other pictures?

    How to get UiBinder Styles to Act The Same as From a .css File?

    How to remove margin space around body or clear default css styles

    How to make certain text not selectable with CSS [duplicate]

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?