Animated Blocks

Create nicely looking Animated Blocks with animation on hover. You can use it for creating elements like Pricing Tables and so on.

Usage

To apply this feature, add the .animated-blocks class to a outer <DIV> element and .animated-block class to a all inner <DIV> elements. You can use provided example structure as template (see Source Code below).

Example

Basic

Free

10,000 monthly visits

  • Limited Email Support
  • Unlimited Data Transfer
  • 10GB Local Storage

Sign Up

Startup

$79/mo

25,000 monthly visits

  • Limited Email Support
  • Unlimited Data Transfer
  • 20GB Local Storage

Sign Up

Premium

$499/mo

225,000 monthly visits

  • Email Support
  • Phone Support
  • Unlimited Data Transfer

Sign Up

Show Source


Posters Blocks

Create nicely looking Animated Posters Blocks with animation on hover. You can use it for creating elements like movie, music posters and so on.

Usage

To apply this feature, add the .animated-posters-blocks class to a outer <DIV> element. Posters Blocks contains inner items <DIV> elements with .poster-element class. Each .poster-element <DIV> must have background image which you can insert (or change) with CKEditor. Informational texts can be inserted between <DIV> with class .poster-info. All objects already have CSS settings but you can overwrite them with your own just in the CKEditor by using style command. You can use provided example structure as template (see Source Code below).

Example

Pink Floyd

Fast & Furious

Deckard Shaw seeks revenge against Dominic Toretto and his family for his comatose...

More info
Pink Floyd

Pink Floyd

Pink Floyd, one of the most successful and influential groups ever, formed in the 1960s when Roger Waters, Nick Mason...

Read more
New Moon

New Moon

I knew we were both in mortal danger. Still, in that instant, I felt well. Whole...

More info

Show Source


Futuristic Block

Create Animated Futuristic Block with animation on hover. You can use it for creating elements like billboards and so on.

Usage

To apply this feature you need to create specific HTML structure (see Source Code below) and necessary to specify block elements height in the variables.less. The class names to be used for primary <DIV> element: initial class .futuristic-panel-outer. Outer <DIV> has 4 objects with class .futuristic-panel. All objects already have CSS settings but you can overwrite them with your own just in the CKEditor by using style command (see block on the Home page).

Example

Title #1

 

Title #2

 

Title #3

 

Title #4

 

Your inner text here...

Your inner Title here...

Your button

Show Source

This page has been viewed: 1209 time(s)