Divi Plugin Highlight: Next Image Effect Pro

Posted on August 5, 2020 by in Divi Resources | 1 comment

Divi Plugin Highlight: Next Image Effect Pro

Next Image Effect Pro is a third-party plugin for Divi that adds lots of image hover effects that help draw attention to your images and links. The plugin adds 7 modules to the Divi Builder, each with its own set of designs and effects. In this article, we’ll look at Next Image Effect Pro and see what it can do.

Next Image Effect Pro Installation

Next Image Effect Pro Installation

Purchase and download the plugin from the Divi Marketplace. Follow these steps to install it:

  1. In the WordPress dashboard, go to Plugins > Add New
  2. Upload the plugin from your computer
  3. Click Install Now
  4. Once the plugin is installed, click Activate

Next Image Effect Pro Installation

Next, you’ll need to activate the license. Go to Plugins > Image Effect Pro License. Enter your license key and save the changes.

Next Image Effect Pro Modules

Next Image Effect Pro Modules

Image Effect Pro adds a set of modules to the Divi Builder that include styled combinations of images and text. They add hundreds of hover effects and direction combinations. Text styling options include independent controls for headings, focus text, content, and their backgrounds.

Modules include:

  • Circular Image Hover
  • Image Hover Box
  • Image Icon Effect
  • Mega Image Effect
  • Minimal Image Hover
  • Next Image Scroll
  • Ultimate Image Hover

Circular Image Hover

Circular Image Hover

Circular Image Hover has two main sections: the image and the text (hover content). I’ve added a rectangular image. It displays the image in its original shape but then makes it circular. If the image was square, this would be a perfect circle.

Circular Image Hover

The design settings for the image include box shadow position, strength, and color.

Circular Image Hover

The text includes a section to add the title and content. You can style them in the design settings. I’ve increased the sizes in this example.

Circular Image Hover

The caption background can be either a solid color or a gradient. This one uses the default gradient.

Circular Hover

It has 19 hover effects with 4 direction options for each effect. This is effect 1. The effects have various ways to transition the image out and transition the content in. They include zooms, flips, slides, and lots more.

Image Hover Box

Image Hover Box

The Image Hover Box also includes the image with hover content. It doesn’t change the shape of the image.

Image Hover Box

It also includes the overlay (or background that shows through and looks like an overlay) and adds a heading background. Both backgrounds can include solid colors and gradients. This example uses the default overlay background. I’ve changed the color of the heading background and increased the size of the text.

Image Hover Box

It has 13 different hover effects including flips, slides, fades, zooms, etc. Several of the effects add options for directions. This is effect 1.

Image Icon Effect

Image Icon Effect

Image Icon Effect adds a hover element that displays a title and focus text over the image. Like the others, you can change the background color with either a solid color or a gradient, and it includes multiple hover effects. The hover effects in this one bring in borders and look especially elegant. This is the Zoe hover effect.

Image Icon Effect

What sets this one apart is the icons. You can add 4 different icons and have them open in the same window or a new window.

Image Icon Effect

The icon settings include color, size, spacing, line height, background color, shadow, border, etc. In this example, I’ve added a background color and reduced the line height to create a line. I’ve also added a shadow. This is hover effect Hera.

Image Icon Effect

This is hover effect Terry. I’ve changed the colors of the title and focus text and used the settings for the font sizes and icons from the previous example.

Mega Image Effect

Mega Image Effect

Mega Image Effect is another 2-sided card with an image on one side and content on the other. The front side displays an image as normal.

Mega Image Effect

The backside of the card displays the content as normal and includes font and background adjustments. What sets it apart is the ability to add a button.

Mega Image Effect

You have complete control over the button design including the same solid color and gradient options as the standard background. This example shows a gradient for the button’s background.

Mega Image Effect

You have full control over the button’s styling for the fonts and background. I’ve adjustment the font and border in this example. Every element of the module also has spacing adjustments. I’ve added 20 pixels to the bottom of the button. Each of the modules has these spacing adjustments.

Mega Image Effect

This module has too many hover effects to count. Just the image effects alone are impressive, but it also has lots of text effects. You can adjust the image hover and text hover separately and set the timing for the text effect.

Mega Image Effect

This example the Parallel Left image hover, the Zoom In text effect, and a small text delay.

Minimal Image Hover

Minimal Image Hover

Minimal Image Effect is the simplest module in the set. It displays an image with hover effects.

Minimal Image Hover

The only custom setting is the hover effects. It includes 10 effects to choose from. We’ll look at a few.

Minimal Image Hover

This example is Scale Out Rotate. The image is scaled out and rotated just a little in its normal state. On hover, the image zooms in and rotates to its normal state.

Minimal Image Hover

This is Blur. The image is blurred until you hover, then it slowly un-blurs until it’s sharp.

Minimal Image Hover

This is Flashing. A burst of white flashes over the image and then clears away as you hover.

Next Image Scroll

Next Image Scroll

Next Image Scroll places an overlay over the image and adds a button to the upper right corner. You can adjust the button’s color for both solid colors and gradients. This example shows the default settings.

Next Image Scroll

You can also adjust the overlay. Set a solid color or a gradient. It also includes gradient types and standard controls.

Next Image Scroll

The background position lets you display the top or the bottom of the image.

Next Image Scroll

The image moves to the top or bottom on hover. In this example, the module shows the bottom of the image and scrolls to the top of the image on hover.

Ultimate Image Hover

Ultimate Image Hover

Ultimate Image Hover displays the size and shape based on the effect you choose. This is Effect 1. It shows a portion of the photo in a tall rectangular image. It includes the title and focus text, content, and an overlay. The overlay includes adjustments for the color as a solid or a gradient.

Ultimate Image Hover

On hover, the overlay lightens and the text is revealed.

Ultimate Image Hover

Image opacity lets you adjust the amount of the background that can be seen. In this example, I’ve reduced the opacity, changed the size of the heading and focus text, the heading text color, the focus text boldness, made the focus text all-caps, and added a text shadow to the focus text.

Ultimate Image Hover

This module has 24 hover effects. They display the image in different sizes, levels of opacity, placement of text, and add borders.

Ultimate Image Hover

This is Effect 4. It displays the image in a square and adds a border around the inside that overlaps on the ends.

Ultimate Image Hover

This is Effect 5. It darkens the overlay and adds a border around the inside of the image and displays the image in a square.

Ultimate Image Hover

Effect 6 places the heading and focus text at the top with a line under them, and the content at the bottom.

Ultimate Image Hover

Effect 8 keeps the large rectangular size and adds a thin border.

Ultimate Image Hover

This is Effect 10. On hover, the image zooms, the line becomes an x, and the gradient appears.

Next Image Effect Pro Example

Next Image Effect Pro Example

For a simple example, here’s a look at the Divi Home Renovation layout with the Ultimate Image Hover module added to create a CTA. I’ve added it to the left of the image and used colors from the layout.

Next Image Effect Pro Example

On hover, the image slides to the right, the CTA is revealed, the image becomes less opaque (which lets more of the background color through) and a border is added. This example uses hover effect 8.

Purchase Next Image Effect Pro

Purchase Next Image Effect Pro

Next Image Effect Pro is available in the Divi Marketplace for $49. It includes unlimited website usage, a 30-day money-back guarantee, and 1 year of support and updates.

Ending Thoughts

That’s our look at Next Image Effect Pro for Divi. The 7 modules add a lot of image features that make your site stand out. Using them is intuitive. The number of effects and combinations between all of the modules is impressive. Each module is unique, but most add images, headings, and content to provide a lot of design possibilities for CTAs, team members, testimonials, general information, contact information, and lots more.

We want to hear from you. Have you tried Next Image Effect Pro? Let us know what you think about it in the comments.

Featured Image via elenabsl / shutterstock.com

Looking For More Great Divi Extensions? Check These Out!

Divi Supreme Pro

With 40+ Divi premium modules and extensions to choose from. Take ...

View Product

1418 Sales

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

1282 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

574 Sales

Divi Image Hover

Subtle image hover effects. Comes with 250+ amazing designs that ...

View Product

577 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

777 Sales

Divi Responsive Helper

The Divi Responsive Helper allows you to easily adjust device ...

View Product

550 Sales

Divi Essential

All in one set of 60+ design modules with 500+ layouts for all Divi ...

View Product

503 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

829 Sales

Premade Layouts

Check Out These Related Posts

1 Comment

  1. Great , it’s a much needed function.

Join To Download Today

Pin It on Pinterest