0

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!

Curt Kempton
  • 1
  • 2

1 Answers1

0

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

Hive7
  • 3,599
  • 2
  • 22
  • 38
  • Just did what you suggest, but t's still really jerky and abrupt. Maybe I mean to say that as you approach the edge of the column it begins the transition, and the height adjustment would be really nice too. Maybe This would be better in Divs. I want it to feel really fluid. – Curt Kempton Sep 07 '13 at 15:53
  • Please can you make a fiddle so I can test @CurtKempton – Hive7 Sep 07 '13 at 15:59