Pricing table resize feel like the mac dock using html5 and/or css

Question

I have an idea that I have started building a pricing table that Ideally would feel very similar to the way magnification of the Mac OSX dock would feel (super fluid), but I'm wondering if there is a best practice for doing stuff like this.

To give you an idea of where we are starting, here is what I have so far: http://tmp.responsibid.com/#features

Any help or pointing to the right resources would be fantastic!

Answer 1

You need to add this css on the hover and it will work fine:

-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);

Also add css transitions:

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

Though you will have to have it in a container then vertically align it then add overflow hidden to the container and give it a set height as it will not only expand it how you want width ways but also length ways