{"id":76,"date":"2020-01-28T09:42:13","date_gmt":"2020-01-28T09:42:13","guid":{"rendered":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/image-effects\/flip-box-effects\/"},"modified":"2020-02-20T22:27:25","modified_gmt":"2020-02-20T22:27:25","slug":"flip-box-effects","status":"publish","type":"docs","link":"https:\/\/www.oxilabdemos.com\/image-hover\/docs\/image-effects\/flip-box-effects\/","title":{"rendered":"Flip Box Effects"},"content":{"rendered":"

Flip box Effects<\/h1>\n
\n

Flip Box Effects is a responsive image hover effects ultimate element that lets you add a box to the screen that will flip through the items within the box. Here, in this tutorial, you’ll know about this effect element and see how it works. Now, let’s dive into it:<\/strong><\/em><\/p>\n

\"\"<\/a><\/p>\n

\u21d2See Demo\u21d0<\/a><\/h1>\n
\n

<\/h2>\n

Creating a New Image Hover with Flipbox Effects<\/h2>\n

First, navigate Image Hover> Image Hover> Elements> Flipbox Effects <\/strong>from your dashboard.<\/p>\n

Then, create a new Image Hover style with flip box effects by clicking on the Create Style button like below<\/p>\n

\"\"<\/a><\/p>\n

See the Using Image Hover<\/a> section to know how to add and edit an image hover item.<\/strong><\/em><\/p>\n

 <\/p>\n

Customizing & Adding Data<\/h2>\n

Now, after you create a new Image Hover using Flipbox Effects it’s time to go further and add\/style data to your style. Let’s start this section:<\/p>\n

 <\/p>\n

Add\/Edit New Image Hover<\/h3>\n

To add a new image hover item, click on the Add New Flip Box (+)<\/strong> button. After clicking that button, you’ll find a Hover Modification Form to upload the flip image and add info.<\/p>\n

Add both front-end and backend image for the flip box effects.<\/p>\n

\"\"<\/a><\/p>\n

After selecting a layout and creating a flip image hover effect item, you can see the live preview at the bottom side of the editor page.<\/p>\n

Now, when you hover over the image you’ll find an Edit<\/strong> icon in the image. See the image below,<\/p>\n

\"\"<\/a><\/p>\n

By selecting the Edit<\/strong> icon, you’ll find the image hover modification form. Here you can edit the image hover in flip box effects.<\/p>\n

 <\/p>\n

General Settings<\/h3>\n

\u039eColumn & Effects-<\/span> In the first section of the General Settings area, you can customize the columns and effects of the flip box image hover. You can define the number of columns you want to display in a single row and set the effect time. And in the Animation<\/a> setting group, set the animation type and customize its properties.<\/p>\n

\u039eGeneral Style-<\/span> This section mostly covers the measurements of the image hover container. Customize the width, height, and margin for different dimensions here.<\/p>\n

 <\/p>\n

Front-end<\/h3>\n

\u039eContent Settings-<\/span> In the Front-end settings area, you’ll find Content Settings. Here, you can customize the border and border-radius of the front flip box image.<\/p>\n

 <\/p>\n

Back-end<\/h3>\n

\u039eContent Settings-<\/span> In the Backend, the first section is Content Settings. Here, you can customize the style of the back-end image content.<\/p>\n

\u039eDescription Settings-<\/span> Here, customize the description text of the flip box back image. Customize the typography settings group; add color; customize the margin and text-shadow. You can also add an animation style to the description.<\/p>\n

\u039eHeading Settings-<\/span> Here, customize the heading text of the flip box image hover effects. Customize the typography settings group; add color and background; customize the padding, margin, and text-shadow. You can also add an animation style to the heading.<\/p>\n

<\/h3>\n

Custom CSS Option<\/h3>\n

Here you’ll find a box where you can add your custom CSS code. Advanced developers can use this option for their convenience. After entering the codes, developers can see the live preview. Once you finish coding hit the “Save” button to make your changes.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Now, just Copy the Shortcode and Paste anywhere in the post or page or plugins where you want to show the Flip Box Effects.<\/strong><\/em><\/p>\n

\n

\n","protected":false},"featured_media":0,"parent":52,"menu_order":4,"template":"","doc_tag":[],"class_list":["post-76","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":4,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/76\/revisions"}],"predecessor-version":[{"id":2732,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/76\/revisions\/2732"}],"up":[{"embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/docs\/52"}],"wp:attachment":[{"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.oxilabdemos.com\/image-hover\/wp-json\/wp\/v2\/doc_tag?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}