Divi image hover plugin is a premium plugin by the folks over at Divizoom that adds a new module to the Divi Builder for both Divi and Extra. The new module combines features from three Divi modules (image, text, and button modules) and then adds new features to add an overlay and hover effects to images.
Features include
250+ image hover effects,
Title Text
Content Text
Button
6 Types of Hover Category
Title Background
Content Background
Image overlay with background image
and lots more.
Divi image hover plugin is a great way to add micro-interactions that give your readers feedback and call attention to your call-to-action (CTA). Animations include zooming the image in or out, stretching the image, compressing the image, adding an overlay, swiping across, revealing text, etc.
How to install the plugin
Generally, all WordPress Plugin installation processes are the same. To Install Divi image hover Module please follow these steps:
- Go to the WordPress Admin dashboard. On the left of your screen, you will see a menu option “Plugins”, move your cursor to the plugins and click the Add New submenu to upload a new plugin.
- Go to ‘Add New’, and on this page, you will see ‘Add Plugin’ and right beside it you’ll find a button that says ‘Upload Plugin’, click on that
Finally, select the .zip file that you downloaded after purchasing.
When the plugin is installed successfully, you will need to ‘Activate’ the plugin
If you purchase the Divi image hover plugin from DiviCake Platform Then please extract the downloadable file first. You will see another zip file name as dizo-image-hover.zip Upload this zip file.
How to install Divi image hover plugin
Once you have installed Divi Image Hover Module, just like any other Divi Modules on your website, you will find our modules alongside the rest of the Divi Modules that are available in the “Insert Module” window.
Divi image hover module
How to use the Divi image hover plugin
There are three tabs in the Divi image hover module.
- Content
- Design
- Advanced
Content Tab:
After inserting the Divi image hover module you will see the
- Hover effect
- Content
- Image overlay
- Swap Effect
- Background
- Link
- Admin Label
Divi image hover plugin overview
Hover effect:
There are a total of 4 Hover effects without Default
- Classic
- Modern
- Advanced
- Minimal
Every Hover effects have subcategory hover effects
Classic hover style, Modern hover style, Advanced hover style, and Minimal hove style.
Image hover category
Content:
Upload the image by clicking on add image “+” Icon
If you want to display much content then please use the large size image.
1:1,1:3 or 1:5 Image ratio would be a good fit for this purpose
Then you will get much space to wrap the content.
Upload Image
Title:
You can upload 3 types of title
The title is divided by Prefix, Infix, and suffix
So you will get more options to style your title Prefix, Infix, and Suffix.
Text:
Write the text in the content box area. You will also get an option to upload an image here by clicking the Add Media button
Text image
Button:
You may want to use a button that’s why we’ve created a button input option. If the button text and URL are blank then the button will not display on the image.
Content toggle
If you want to text vertically middle then enable the Vertical align center.
Image Overlay:
Create a stunning overlay over your image.
Divi image hover plugin has 3 types of image overlay options
- Background color
- Gradient Background
- Background Image
Image overlay
Swap Effect:
The image swap effect is the most demandable option for e-commerce sites. That’s why the Divi image hover plugin has this option.
Enable the Swap Effect. You will get an option to upload a backend image.
Please upload the Same size images for the swap effect. This will look good for the view.
Image swap effects
Image Lightbox
Divi image hover plugin now gives you lightbox feature ability. You can create the lightbox feature by enabling the lightbox. Lightbox features allow the only Title text. The title text will show only when the image is open on the popup. You have the ability to add many images to the lightbox by adding the Data lightbox text. Use the Same Data lightbox text to show the images in popup Scroll.
Image as Background
You can also create the image as a background image. If you enable this feature you can also get the image height option to select the image height in different devices as your content.
If you enable this feature please remember some hover effects won’t work. Some hover effects need the image to create a hover effect.
Image as background
Module Background:
Generally Module Background color doesn’t create any effect on the image hover.
But if you decrease the image opacity background color will be visible at that time. This will create amazing effects sometimes.
Module Background
Module Link:
The full module will be clickable. If you input a URL in the Module link URL option your module will be full Clickable.
Module Link
Design Tab:
There are a lot of options to design your Title, content, and button.
Every title has 3 options Prefix, Infix, and Suffix
So you have control to design your every title element.
There is also a title background option. So you can create a background color, gradient color or upload a background image on the title. You can also create a box-shadow and border of every title element.
Divi image hover plugin Title Design
Title Design
Image Rounded Corner:
Sometimes you need to create your image a rounded corner shape or circle. That’s why the Divi image hover plugin included the image border and rounded corner option.
So you have access to control your full module image.
Image border-radius
Circle Image
Button:
You may also want to add a Button to move your customer to another page or section. That’s why we add a button option and also have all button customization options to the Divi image hover module.
Button
Custom Border:
All Element has a custom border option.
Title, Title Prefix, Infix, Suffix, Content Text
Custom border
Custom Spacing:
Divi image hover plugin has all control to create the spacing.
The container, Title, and Text tabs are included all spacing input box.
Custom spacing
Advanced CSS:
Though you have all control to design your module, we also created a custom CSS input box for you in the Advanced tab.
Advanced Custom CSS
How to change the Modern Lexi hover effects Overlay color:
Please go to the Advanced tab and here you will see Content wrapper before Custom css box
please add this code to here
box-shadow: 0 0 0 900px rgba(72,6,75,0.9);
Change the rgba color value;
Modern lexi hover overlay color change
How to Increase the Modern Lexi hover effects text width:
Please go to the Advanced tab and here you will see Text Custom css box
please add this code to here
width:300px
Change the number value;
Modern lexi hover effects Width value change
How to Increase the Modern Lexi hover effects overlay width:
Please go to the Advanced tab and here you will see Content Wrapper Before Custom css box
please add this code
width:400px; height:400px;
You can also change the background color:
background:rgb(6 6 6 / 51%);
lexi hover effects
You can also add the Button custom css from the Advanced tab Button Custom css box
display:line-block
Lexi hover effects button custom css
We have tried to create our plugin as simple as much. If you have any suggestions for the new feature or any other else please let us know. We really appreciate your thoughts.
If you have any issues to customize the plugin please create a support ticket. Our Support team will try to solve your problem as soon as possible.
Thank you so much for being with us.