How to Use Hover Box Widget

element pack

How to Use Hover Box Widget

This documentation is about the hover box widget. Hover box is such a box that contains content (image, text, etc.) and will allow you to make a hover event. Especially, in terms of hovering the hover box, you could show a background image for every single box.

The step by step instructions below about the Hover Box Widget will get you to walk in the right way to use the widget developed by Element Pack.

So, let’s get started.

To Insert widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

The Content Tab having some handy sections will genuinely get you to have a structure of the Hover Box Widget.

Hover Box Items

After dragging and dropping the widget in a new section, you will get a list group. The list not limited, you can add a new list in the group just clicking on the ADD ITEM button. In addition, from the control, Image Size, you can manipulate the background image size (click the dropdown arrow).

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, set Icon (From icon library or upload SVG ), Title, Title Link, Sub Title

, and most importantly, you can also add a description, read more button, button link, and background image included in the list item.

Similarly, do the same thing in connection with the rest of the repeaters.

Come to the Content tab > Hover Box Items.

Selecting Skin

Hover Box Items section will allow you select Skin like Flexure and Envelope with the default one. See Screenshot below.

Additional Settings

This section will allow you to manipulate Icon, Title, Sub Title, Description, and Button. For that, you have to enable or disable the Yes/ No switcher button. Look at the photo above.

Along with default settings, you can rewrite the settings such as Height(800), Content Width(1200), Columns, Column Gap(small, large, medium, collapse), Select Event(hover, click), and Alignment(left, right, center, or justified).

The most important thing is Image Effect. Using this switcher button, you can give an image zoom in Effect.

Simply, go to the Content tab > Additional Settings.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Hover Box

This section holds Overlay Color control that will let you chose the overlay color of the background image.


This sub-section will let you set Background Type, Color, Image, Padding, Border Type, Radius, Advance Radius, Box Shadow. In connection with the mode of Normal, Hover, and Active, you’ll get able to set Background Type and Color.

Just go to the Style tab > Hover Box.


This section will allow you to set the icon color, size, and rotation in the Normal, Hover, and Active mode.

Go to the Style tab > Icon.

Title, Subtitle, & Description

In respect of all the sections mentioned in the title, you’ll find three modes such as Normal, Hover, and Active. And the modes will let you put Color, Hover Color, Active Color, and Typography.

Follow the flow, Style tab > Title > Subtitle > Description.


To style the button, go to the Style tab > Button > and check all the controls.

To sum up, it seems that you’ve read this article and found very useful. If you need more design ideas, you should go to our demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.