Getting Started
The divi image hover box module is a remarkable creation by Diviflash to display images with alluring effects like overlay, image scale, border animations, and caption styler. Playing with all these features can make your pictures more covetable that blows up visitors’ minds in a moment. However, more features are added in the module that takes the design hand beyond barriers and enhances the engagement ratio. Unlike any other Divi modules, the range of features of the image hover box is split into three categories,
+ Content Tab
+ Design Tab
+ Advanced Tab
Content Tab
The content tab of the Divi Image Hover Box module integrates several primary and essential features. Of course, image and Hover Settings are the most valuable features among others in the content tab. However, inside every feature, you will get a vast number of customizing options. So, let’s discover the design possibilities of the content tab with further ado.
Image
The image feature of the module takes all the responsibilities to add an image with alt-text & title to make the image more informative to the visitors. Also, you get the privilege to apply an icon on the image hover box for better demonstration.
Hover Setting
Hover Setting allows you to implement an overlay, border & content revealing animations, and image scale effects to the image hover box. Also, you can show the content title & icon over the module while hovering with the facility to provide the most peaceful space & position.
Link
You can easily take the audience to another page by linking the divi image hover box. This is a well-planned module with every customization setting that will be required while working.
Background
The image hover box’s background setting has multiple facilities to implement for a better layout, such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the whole module.
Admin Label
Admin Label of divi image hover box module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.
Design Tab
The design tab carries all the elegant features required to style the image hover box module. Features like image & icon, title, spacing, and filter take the module beauty to a new level. In addition, the sizing, box-shadow, animation features give you better control over the module. Now, it’s time to know how all these features work?
Image & Icon
The Image & Icon feature brings several effects like hue, saturation, brightness, contrast, opacity, blur, and such to make the module image & icon more eye-catching. Furthermore, even 16 different image blend modes are available under this feature, making your module super attractive.
Title
Under the title feature, you can modify the title tag, font-weight, title text color, size, letter spacing, and line-height. Also, you get the privilege to add different stylish text-shadow effects to the title.
Sizing
As a designer, you would love to control the module’s alignment, width, and height. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. You can even set a min or max height and width for the container.
Spacing
Provide a margin for the balanced gap around the title and icon of the image hover box with the spacing feature. Moreover, the general margin & padding are available that affect the entire module.
Border
The border feature of the module can provide a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see if it’s easier than you thought.
Box Shadow
The box-shadow feature affects the entire module, and it consists of 7 distinct shadow effects with all the necessary settings.
Filters
The filter feature is awe-inspiring and supportive, among other divi default features. Under this unique function, you will achieve numerous color effects for the entire module. In addition, the filter setting is responsible for adding effects like hue, saturation, brightness, contrast, opacity, blur, and such to your hover box. So, increase or decrease the value of these effects as you want them to your design.
Transform
The transform feature of the image hover box module provides five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on your module will give you better control over the section.
Animation
Animation setting exists in all the Divi default modules. It has seven different effects and other options to adjust the beauty of the animated section.
Advanced Tab
The Content and Design tab can bring you each possibility to design the stylish image hover box, so harness the opportunity as much as you can. However, the Advanced Tab intends to quench the developer’s thirst to have direct control over the module. Developers can precisely play with each module element by implementing CSS ID & Classes and other Custom CSS codes. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently.
CSS ID & Classes
CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, and styling the module.
CSS Class: Assign any 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.
Custom CSS
The Custom CSS section has three distinct CSS implementing areas in the divi image hover box module. You have access to all the areas to write down any CSS Code and target any particular area.
Visibility
The visibility option of the advanced setting offers designers to conceal the module on particular devices.
Transitions
Under the transition setting, you have features like Transition duration, Delay, and Curve Speed for better customization.
Position
Here you can take complete control over the relative, absolute, and fixed position. This option is also available in every divi module and works almost the same for all.
Scroll Effects
If you want to provide a scroll effect to your module, you have the opportunity with the scroll effect setting. Under this setting, you get a Sticky position, scroll transform effects, vertical motion, and motion effect trigger functions like any other divi module.
NOTE:
Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.
Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.
