The latest addition to the DiviFlash plugin is the Image Reveal module, which allows you to add exciting animations to your images to give a better look.
Like all the other modules of DiviFlash, this module is also simple to use yet powerful enough to enhance your website.
In this documentation, we will show you all the features this module offers and how to use it without any hassle.
Image Reveal Settings
When you select the Image Reveal module, a blank image placeholder will appear on your screen along with the Image Reveal Settings tab.
From this tab, you can customize the contents of the module. There are three sections: Content, Design, and Advanced.
Image Reveal Settings – Content
First, let’s explore the functionalities of the Content section.
Image
The main component of the Image Reveal module is the image. So, the first section of the tab lets you add the image.
Under the placeholder image on the tab, you can see two fields, Alternative Text and Title Text. Using these fields you can add alt text and title to your image.
Reveal Animation
This section has the options where you can choose the image reveal animations.
- Direction: Choose the direction of the reveal animation. You have four options to choose from: Left to right, Right to left, Top to bottom, and Bottom to top.
- Reveal Color: Pick the color of the cover that reveals the image. You can use a solid color or a gradient on the cover.
- Delay (Sec): Adjust the time of the delay before the covered image appears on your screen.
- Animation Time (Sec): Adjust how long will it take to reveal the image.
- Animate in Viewport (%): Adjust the viewport percentage of the image reveal animation.
- Effect: Choose the type of animation for the image reveal. You have 15 options to choose from.
- Effect Delay (Sec): Adjust how long the animation will take to appear.
- Effect Time (Sec): Adjust how long the animation will be in effect.
Placeholder
You can use a background, a gradient, or another image as a placeholder for the image to be revealed. This helps users to create unique after-effects with multiple images.
Some default options are available in all Divi modules. For example, Rounded Corners, Box Shadows, etc.
Overlay
When enabled, you can add an overlay to your image.
- Color on Default: Pick the overlay color.
- Opacity: Adjust the opacity of the chosen overlay color.
Hover
An overlay will be added when you hover over the revealed image. Or, you can add a hover effect.
- Color: Choose the color of the overlay.
- Opacity: Set the opacity of the overlay.
- Styles: Choose the overlay animation. You have 9 options to choose from.
- Text Content Reveal: Pick the direction of the text content from 4 options: top, bottom, left, right.
- Animation Delay: Determine how long the overlay animation will be delayed.
- Animation Time: Determine how long the overlay will take to cover the image fully.
- Content: Enable this option to add text content to the overlay. You can add a title and description.
- Hover Overlay Content: Edit and customize the title and description of the content. Edit content placement, alignment, and padding as you like.
If you want to add hover effects to the image, you have to disable the Overlay option and enable the Hover effects option. You can choose from four zooming effects. You can also customize the effects based on the zooming effect you choose.
Caption
Enable to add captions to your image. You can change the caption’s placement to either the top or bottom of the image. You can also change the background color and add padding to the caption.
Link
You can make the image a link from here. You can also select to open the link to another window. There is a toggle button that says “Open in Lightbox”, once enabled, the image will open in Lightbox and ignore the other links.
Background
In this section, you can customize the entire module by adding a background color, gradient, image, video, pattern, or mask.
Admin Label
Instead of mirroring the module’s name, you can give the admin label a name of your choice.
Image Reveal Settings – Design
With all the features from the Content section demonstrated, we will now move on to the Design section.
Hover Overlay Content Styles
This section will only be available if you enable the “Content” option after enabling the Overlay option under the Hover section. You can change the style of the title and description used in the Overlay.
The customizable options are Font, Font Weight, Font Style, Text Alignment, Text Color, Text Spacing, Line Height, and Text Shadow.
Caption Styles
This section won’t be available if you disable Captions from the Content section. All the options from “Hover Overlay Content Styles” are also available here.
Alignment
Change the alignment of the image to be revealed.
Sizing
You will find all the options to change the sizing of the whole module.
- Force Fullwidth: Enabling this option will make the image fullwidth.
- Width: Adjust the width of the module.
- Max Width: Set a max width for the module.
- Module Alignment: Change the alignment of the module.
- Min Height: Set a minimum height for the module.
- Height: Adjust the height of the module.
- Max Height: Set a maximum height for the module.
Spacing
Add margins and padding to the module.
Border
Change border style, and color, and apply rounded corners.
Box Shadow
Apply a shadow to the Image Reveal module.
Filters
Modify the colors that were applied to the module.
Transform
Make changes to the scale and position of the module.
Animation
Apply an animation effect to the Image Reveal module. Choose from 7 different styles of animation.
Image Reveal Settings – Advanced
There are a few features that are common to all Divi modules, which can be found on the advanced tab. These are the customization features that are at your disposal if you want to customize each item of the Image Reveal module by adding custom CSS coding.
