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:

  1.  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.
  2. 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.

divi image hover plugin installation

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

Divi image hover module

How to use the Divi image hover plugin

There are three tabs in the Divi image hover module.

  1. Content
  2. Design
  3. Advanced

Content Tab:

After inserting the Divi image hover module you will see the 

  1. Hover effect
  2. Content
  3. Image overlay
  4. Swap Effect
  5. Background
  6. Link
  7. Admin Label
Divi image hover plugin overview

Divi image hover plugin overview

Hover effect:

There are a total of 4 Hover effects without Default

  1. Classic
  2. Modern
  3. Advanced
  4. Minimal

Every Hover effects have subcategory hover effects

Classic hover style, Modern hover style, Advanced hover style, and Minimal hove style.

Divi image hover all hover effects

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

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

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.

Divi image hover content toggle

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

  1. Background color
  2. Gradient Background
  3. Background Image
image overlay with text

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 Effect

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. 

divi image hover Image as background

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 with image opacity

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

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.

Title Design

Divi image hover plugin Title Design

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 rounded corner

Image border-radius

Circle image

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

Button

Custom Border:

All Element has a custom border option. 

Title, Title Prefix, Infix, Suffix, Content Text

Custom border

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

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

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 effects

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 hover effects Lexi style width

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

lexi hover effects

You can also add the Button custom css from the Advanced tab Button Custom css box
display:line-block

Button custom css box

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.