CSS: is it possible to enlarge with animation an element in place with CSS?

Question

Check this jsFiddle. Now that CSS animations are almost in full swing, I'd like to do something like this in CSS: when mouse comes over an element (.box), it is enlarged with an animation, its center stays in the same place and all other elements stay where they are.

If I knew the elements' widths, I guess I could do that with a wrapper element for each element and use relative positioning for the element (.box) and animate it's width, height, left and top. But this example has variable with elements.

If it's not possible, any other suggestions for such an effect?

Answer 1

Yes, you can use CSS3 transitions.

.box {
    -webkit-transition:  -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out; 
    transition: transform .2s ease-out; 
}
.box:hover {
   -webkit-transform:scale(2);
   -moz-transform:scale(2);
   -o-transform:scale(2);
   transform:scale(2);
}

See fidd.e: http://jsfiddle.net/TheNix/uzgha/6/

Answer 2

Yup, using transforms and transitions. Here's an update Fiddle: http://jsfiddle.net/rgthree/wTbTf/

.container {-webkit-transform:translateZ(0); /* Stop webkit flicker bug */}
.box {
    postion:relative;
    z-index:1;
    -webkit-transition:-webkit-transform 0.5s ease-in-out;
    -moz-transition:-moz-transform 0.5s ease-in-out;
    -o-transition:-o-transform 0.5s ease-in-out;
    transition:transform 0.5s ease-in-out;
}    
.box:hover {
    z-index:2; /* Put on top of others */
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}

You can also scale down, as in: http://jsfiddle.net/rgthree/wTbTf/2/