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 the widget is just a matter of drag and dropping. As you see in the screenshot above.
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 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).
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.
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.
The hover Box Items section will allow you to select Skin like Flexure and Envelope with the default one. See the Screenshot below.
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 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.
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.
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 it very useful. If you need more design ideas, you should go to our demo page.