Divi hover box module is a unique design discovered by the Diviflash for Divi lovers. This Divi module’s most exciting and supportive features are the hover effect and change builder view setting. Besides that, various impressive and time-saving customization features available in this module, such as vertical alignment, custom spacing, title & subtitle, and so on. Unlike any other Divi modules, the Diviflash Hover Box features are split into 3 categories,
- Content Option
- Design Option
- Advanced Option
Divi Hover Box Module Content Option
Change Builder View
- Hover Effect on Title Or Subtitle
Activating the Title Or Subtitle on Hover options will display the title or subtitle while hovering over a container. And you have the full authority to fix a particular element that will be portrayed on hover mode.
- Content on Hover
Content on hover works as the title on hover option. Here, a designer has the opportunity to determine whether content should be visible or not on hover mode.
- Button on Hover
The Button on Hover option allows you to show the button on hover mode.
- Background scale on hover
The background scale on hover is an impressive feature that slightly increases the background image over hovering mode.
- Hover Effect Over Animation Direction
All the hover effects also come with these little tweets. You can choose one animation direction from the list of nine. You can control the animation effect in this setting, whether it comes from the left, right, top, or bottom side while hovering. So, think from the designing perspective and set your appropriate animation direction.
Divi Hover Box Module Design Option
- Wrapper spacing
The module or element of the module (Button) is wrapped in a container. You can give margin and padding on all four sides.
Wrapper spacing helps designers to put margins and padding over the button. And remember each ingredient within the button will move at the same time.
- Content spacing
On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the title, subtitle, content text, and button separately.
Divi Hover Box Module Advanced Option
CSS ID & Classes
- CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or to style the module.
- CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.