[TS-VCSC-Spacer height=”20″]

CONTENT FLIP BOX

SHOW A CONTENT BOX WITH TWO SIDES

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Content Flip Box Features

[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://www.mfdsgn.com/mf/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_check_blue.png”]
  • Select from two different effects (simple or cube)
  • Select from different animation (transition) speed (simple effect)
  • Use font icon or image icon for front panel
  • Add link button to back panel
  • Trigger transition either by hover or click event
  • Use Google font for contents
  • Customize font and background colors
  • Apply custom borders to front and back panel
  • Add viewport animation to element
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height=”20″]
dsfsd
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

SIMPLE LAYOUT

SHOW A CONTENT BOX WITH TWO SIDES

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Horizontal Flip

[TS-VCSC-Content-Flip flip_effect_style1=”vertical” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21941″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_style1=”vertical” flip_effect_speed=”veryslow” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21942″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_style1=”vertical” flip_effect_speed=”veryfast” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21940″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]
[TS-VCSC-Spacer height=”40″]

Vertical Flip

[TS-VCSC-Content-Flip flip_effect_speed=”veryslow” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21929″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21927″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_effect_speed=”veryfast” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21925″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

CUBE LAYOUT

SHOW A CONTENT BOX WITH TWO SIDES

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Right Flip

[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21941″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21942″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21940″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]
[TS-VCSC-Spacer height=”40″]

Upwards Flip

[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21929″ flip_border_type=”solid” front_background=”#f4ebde” animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21927″ flip_border_type=”solid” front_background=”#d5efc6″ animations=”true” animation_view=”appear”]
[TS-VCSC-Content-Flip flip_style=”style2″ flip_effect_style2=”ts-flip-up” front_title=”Content Flip Box” font_fronttitle_family=”Default:regular” front_content=”This is the message for the front panel of this flip box.” font_frontcontent_family=”Default:regular” back_title=”Back Title” font_backtitle_family=”Default:regular” back_content=”This is the back message.” font_backcontent_family=”Default:regular” read_more_link=”true” font_button_family=”Default:regular” read_more_url=”#” front_icon_replace=”true” front_image=”21925″ flip_border_type=”solid” front_background=”#f7f7f7″ animations=”true” animation_view=”appear”]
[TS-VCSC-Spacer height=”40″]