Flip Out Cards: Flip-Card Style Gallery

Have you every wished your site included a flip-card style gallery? With the Flip Out Cards plugin, you can have just that.

The plugin features a sleek design, with simple and impressive animations that flip out left and right or top and bottom.

Here’s how it works:

  • To create a flip out cards that show more info when hover, simply include the latest jQuery library together with jquery.flipout_cards.js and flipout_cards.css into your document’s <head>, and call the function.
  • Follow the HTML markup.
  • The container with the class name foc-main will be the main content area where the cards will flip out from. All other containers will be the cards. You can have as many cards as you like. Simply duplicate the container with the class name foc-left and the plugin will automatically stack it all up in order.

This type of tool works great for small chunks of simple information such as small stacking text or functionality such as the demo weather display.