How to Create Simple Animated Pricing Tables with Foundation

A simple and effective animated pricing tables created with Foundation Framework and a few lines of CSS code.

Pricing tables are used in web design a lot as they provide the pricing info for different services in the most undestandable way. With the advances and developments in the CSS,you can create simple yet effective way to present information so users can interact with it.
These simple pricing tables are animated with simple CSS transitions so the selected pricing plan will zoom in and will be in front of the other two. The framework used is Zurb Foundation. By default, there are a great looking pricing tables. They are used as a basis for the animated ones.
Have a look below to see how it is done and make sure you check out the demo to see the pricing tables. You can download the source code if you want to give it a try or use it on your own website.

The HTML Structure

If you want to create a row of three pricing tables you should create a 3-column structure:

 <div class="large-4 medium-4 columns">
 <ul class="pricing-table active-tb shadow mrgn-20-top">
 <li class="title">Starter</li>
 <li class="bullet-item">512 MB RAM</li>
 <li class="bullet-item">50GB Disk</li>
 <li class="bullet-item">1 User</li>
 <li class="bullet-item">4TB bandwidth</li>
 <li class="price">$9</li>
 <li class="cta-button"><a class="button text-transform" href="#">Choose</a></li>

As you can see the structure is very simple. The whole table is created by using an unordered list and there are classes for the titles, the items featured, the price and the button. You may adjust the table to suit your needs in the main stylesheet(foundation.css).

The CSS Structure

To establish that it is going to be a simple zoom effect a transform: scale(1) property is used in a class called .active-tb. There is also transition: 0.4s ease added. The position: relative and z-index:13 are needed so you can position the elements in front of the others when they are hovered. If you do not use positioning and z-index, you will have the pricing tables scaling behind the next one. In the .active-tb:hover the scale is adjusted so the tables are zooming in – transform: scale(1.25). There is again a relative position but the z-index is set to 15 so the hovered table is in front if the of the other ones.

.active-tb {
 position: relative;
 -webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 -moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 transform: scale(1);
 -webkit-transition: 0.4s ease;
 -moz-transition: 0.4s ease;
 -o-transition: 0.4s ease;
 transition: 0.4s ease;
 .active-tb:hover {
 position: relative;
 -webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 -moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.5);
 transform: scale(1.25);

Pay attention to the media queries for .active-tb and .active-tb:hover as they are adjusted to look good on tablets and smartphones.

That’s all. A simple solution for creating animated pricing tables. Feel free to comment below if you have questions or ideas for other code snippets.

DEMO Download Animated Pricing Tables

You may also like...

4 Responses

  1. Alexandr Kopelevitch says:

    Hi Petia!

    Great piece of code =) The result is great, but not working on the latest Safari (8.0.3). I’ve tried to hack the code, but no success (not enough time).

    In FF & Chrome it works very smoothly.


  2. Halit says:

    Hello, thanks for creating this amazing project. I have got an issue with using it. I am using it multi rows and if there are columns less than three in a row, columns in that row becomes right-aligned or center aligned with a gap column. You can understand better visiting the link below. The same problem happens in medium screen if there are less than two columns in a row (by the way I modified it to show medium-6) how can I handle this problem?

  3. designify says:

    Hey there,
    Thanks for visiting and using one of my projects. 🙂
    For the issues you have with both examples I would suggest you use the block grid that Foundation provide. They the things are right now is not going to work and have the perfect tables you want.
    If you are NOT using the latest version of Foundation, here is an example of how you can achieve multi-column grid without any alignment issues: – basically, you need to define the grid in the UL element {

    <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">

    } and then put you tables in LIs.
    [Here is more info – ]

    If you are using the latest version of Foundation, I would suggest to read here [ – search for Block Grids] as the code is a bit different but the idea is the same:

    <div class="row small-up-1 medium-up-2 large-up-4">
    <div class="column">
    <div class="column">

    {If you want to position the last pricing table in the center, just leave an empty LI or “column”}

    I hope that it helps, let me know if you have further issues and you need help.


Leave a Reply

Your email address will not be published. Required fields are marked *