Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Create Flipbox Overlays and Hovers in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add flipbox overlays and image hover effects to your WordPress site?

Even if you are using a high-quality WordPress theme, you might feel limited by the customization options. In this case, you can use flipboxes and image hovers to add eye-catching animated effects to your site.

In this article, we will show you how to add flip box overlays and image hovers to your WordPress site.

How to create flipbox overlays and hovers in WordPress

What Is a Flipbox?

A flipbox is a box that flips over when you hover your mouse over it. You can add this hover animation to content like images and text boxes.

Flipbox Demo Animation

If your website is relatively static, then the flipbox effect can make it more interactive and engaging. For example, you might show a product’s features in a text box and then use a flipbox animation to reveal the price when a customer hovers over it.

If you are a WordPress freelancer, then you might show your customers’ logos and then use a flip animation to reveal a link to each project.

In this way, you can create an interactive online portfolio.

While these animated effects can enhance your website’s user experience, it’s important not to go overboard. A large number of animations can get overwhelming and confusing and may even affect your website’s performance.

That being said, let’s take a look at how you can add flipbox overlays and image hover effects to your WordPress website.

How to Create Flipbox Overlays and Hover Effects in WordPress

There are many different ways to add animations to WordPress, including using the SeedProd page builder or writing custom code.

However, the best way to create flipbox and hover effects is by using the Flipbox – Awesomes Flip Boxes Image Overlay plugin. This free plugin comes with several different flipbox styles featuring a mix of images, text, and call-to-action buttons.

Create a New Flipbox

The first thing you will need to do is install and activate the Flipbox – Awesomes Flip Boxes Image Overlay plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Once the plugin is installed and activated, you can create your first flipbox by going to Flip Box » Create New.

Create a new flipbox

This shows all the different templates you can use.

If you don’t want to use any of these designs, then click on ‘Import Templates’.

Import a flipbox template

If you see a template you want to use, then go ahead and click on ‘Import’ to add it to your WordPress blog or website.

After choosing a design, you need to click on its ‘Create Style’ button.

Adding a flipbox animation to WordPress

In the popup that appears, type in a name for the flipbox design. This is just for your reference, so you can use anything you want.

You can also choose which layout you want to use by clicking on either 1st, 2nd, or 3rd.

Choose what flipbox to customize

With that done, go ahead and click on ‘Save’.

Add Content to your Flipbox

You can change how the flipbox looks using the General, Front, and Backend tabs.

Flipbox general settings menu

You can change the fonts, padding, and margins. Most of these settings are self-explanatory, so it’s worth looking through them to see what different effects you can create.

When you are happy with how the box looks, it’s time to add some content. Simply scroll to the flipbox preview at the bottom of the screen and hover your mouse over it.

When it appears, click on the ‘Edit’ button.

Flipbox preview edit text

To change the title that appears on the front of the flipbox, you can type it into the ‘Front Title’ field.

After that, you can change the front icon by clicking on the ‘Font Icon’ field and then choosing a new image from the popup that appears.

Adding a font icon to a flipbox in WordPress

Next, you can add an image to the front of the flipbox. Simply click on ‘Upload Image’ and then choose a file from the media library or upload a new image from your computer.

If you don’t already have an image that you want to use, then you can create one using web design software such as Canva.

When you are happy with the front flipbox, it’s time to design the back. To start, type the content you want to display into the ‘Backend Info’ box.

Adding content to a flipbox text box

Often, you will want to use a call to action to send visitors to a related page, such as the listing for your most popular WooCommerce product, pricing information, or some other content.

To change the text that appears on the call to action button, simply type into ‘Backend Button Text’. You can then add the destination URL to the ‘Link’ field.

Add backend flipbox button and link

Finally, click ‘Upload Now’ to change the background image.

When you are happy with how the back of the flipbox is set up, it’s time to click ‘Submit’.

Upload backend background image

The preview will now update to show all your changes.

Create Multiple Flipboxes

At this point, you may want to add more boxes by clicking on the ‘+’ in the ‘Add New Flip Boxes’ section.

This allows you to create multiple flipboxes with the same style and then organize them into columns and rows.

Add a row of flipboxes

You can now create more flipboxes by following the process described above.

For example, you might create a flipbox for each pricing plan in your WooCommerce store.

An example of a pricing page, created using flipbox animations

Add the Flipbox to your WordPress Website

When you are happy with the flipbox, you can add it to your WordPress website using a shortcode that the plugin provides automatically.

On the right-hand side of your screen, just copy the value in the ‘Shortcode’ box.

Copy flipbox shortcode

You can now add the flipbox to any page, post, or widget-ready area using shortcode.

For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

Paste flipbox shortcode

The plugin also has a flipbox widget that you can add to any widget-ready area of your WordPress theme.

If you have created more than one flipbox animation, then you will need to know the ID. To get this information, you can go to Flip Box » Flip Box and look at the id= part of the shortcode.

In the following image, the flipbox ID is 1.

Getting the ID for a flipbox animated effect

When you have this information, go to Appearance » Widgets.

Here, you need to click on the ‘+’ button.

Adding the FlipBox widget to a sidebar or similar section

You can now type in ‘Flipbox’.

When the right widget appears, just drag and drop it onto the sidebar, footer, or similar section.

Adding an animation widget to a widget-ready area

The Flipbox widget will show one of your animations by default.

To show a different flipbox instead, type its ID into the field.

Adding a FlipBox ID to a WordPress widget

When you are happy with how the widget looks, click on ‘Update.’

For more information, please see our guide on how to add and use widgets in WordPress.

We hope this article helped you learn how to add flipbox overlays and hovers to your WordPress site. You may also want to see our guide on how to choose the best web design software or see our expert picks for the best drag and drop WordPress page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.