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.

animated-pricing-tables
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>
 </ul>
 </div>

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);
 border:0;
 -webkit-transition: 0.4s ease;
 -moz-transition: 0.4s ease;
 -o-transition: 0.4s ease;
 transition: 0.4s ease;
 z-index:13;
 }
 .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);
 border:0;
 z-index:15;
 }

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

About This Author

I am Petia Koleva and I am doing web and graphic design. I also like to experiment in infographics and motion graphics design. I graduated @Gray's School of Art in Aberdeen, Scotland - BDes (Hon) Design for Digital Media. I have two design awards: BP Design Award 2012 @ Gray's School of Art and RGU Purchase Prize Award. I am very passionate about design and I share my passion on designify.me.

Post A Reply