CSS3 transition changes another elements's margin

Problem

I have this HTML document:

<div id="c">
    <div class="base">
        <div class="cb" id="red" data-color="Red">
        </div>
    </div>
    <div class="base">
        <div class="cb" id="green" data-color="Green">
        </div>
    </div>
    <div class="base">
        <div class="cb" id="blue" data-color="Blue">
        </div>
    </div>
</div>

​ and this is my CSS:

<style type="text/css">
.cb {
    display: inline-block;
    background-color: #56a100;
    width: 70%;
    height: 70%;
    margin-top: 15%;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.cb:hover {
    display: inline-block;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    width: 100%;
    height: 100%;
    margin-top: auto;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.base {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-top: 20px;
    border-style: ridge;
    text-align: center;
    vertical-align: central;
}
</style>

​ but when I put mouse on one of the .cb elements the others go down! you can see Demo Here. Does anybody how to stop the other elements to going down?

Problem courtesy of: ahmadali shafiee

Solution

Remove display: inline-block; from .base class and make it float to the left float: left;. Here's fixed demo http://jsfiddle.net/pTCFL/2/

Solution courtesy of: Roman

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.