Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Hover Box Widget in Elementor

How to Use Hover Box Widget in Elementor

This documentation is about the hover box widget in Elementor. A hover box is 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 Hover Box Widget in Elementor

Inserting the widget 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

hover box widget items

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

Hover Box Widget in Elementor

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 for the Hover Box Widget in Elementor.

shot 4 - BdThemes

And most importantly, you can also add a description, read more buttons, button links, and background images included in the list item. Use them well to apply the perfect hover effect.

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 Widget in Elementor items style

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

Additional Settings

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).

hoverboxupdate 2 - BdThemes

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

Simply, go to the Content tab > Additional Settings for the Hover Box Widget in Elementor.

Style Tab

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

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

Let’s have a look.

Hover Box

style shot 1 4 - BdThemes

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


style shot 2 3 - BdThemes

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.


style shot 3 2 - BdThemes

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

style shot 4 3 - BdThemes

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.


style shot 5 - BdThemes

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 it very useful. If you need more design ideas, you should go to our demo page.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.