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.
250+ image hover effects,
6 Types of Hover Category
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.
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.
How to use the Divi image hover plugin
There are three tabs in the Divi image hover module.
After inserting the Divi image hover module you will see the
- Hover effect
- Image overlay
- Swap Effect
- Admin Label
There are a total of 4 Hover effects without Default
Every Hover effects have subcategory hover effects
Classic hover style, Modern hover style, Advanced hover style, and Minimal hove style.
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.
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.
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
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.
If you want to text vertically middle then enable the Vertical align center.
Create a stunning overlay over your image.
Divi image hover plugin has 3 types of image overlay options
- Background color
- Gradient Background
- Background Image
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.
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.
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.
The full module will be clickable. If you input a URL in the Module link URL option your module will be full Clickable.
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.
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.
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.
All Element has a custom border option.
Title, Title Prefix, Infix, Suffix, Content Text
Divi image hover plugin has all control to create the spacing.
The container, Title, and Text tabs are included all spacing input box.
Though you have all control to design your module, we also created a custom CSS input box for you in the Advanced tab.
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;
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
Change the number value;
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
You can also change the background color:
background:rgb(6 6 6 / 51%);
You can also add the Button custom css from the Advanced tab Button Custom css box
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.