The Image Zoom Module for Divi is a custom Image Module with a simple and effective Pan & Zoom hover effect.

You will need the Divi WordPress Theme or The Divi Builder Plugin by Elegant Themes to use this plugin.

Use the Image Zoom Module with no effects for a quick Image with Text Overlay Module

Version 2.0.0 of the Image Zoom Module for Divi introduces full Visual Builder Support as well as some cool new settings including:

  • Media Library Images
  • Disable the Pan Effect
  • Background Options
  • Opacity Settings
  • Transition Style Option

Only available at Elegant Market Place.

Settings:

Effect > Zoom
Transition > Ease-in-out
Zoom Amount > 2.5x
Transition Speed > 0.4 secs
Opacity > 1
Media Image > Portrait

Images:

 

A quick and easy Zoom Effect

The Media Library Image setting in Version 2.0.0 of the Image Zoom Module is used for displaying smaller versions of your uploaded image from the media library. There are a few image options to choose from:

  • Full Size
  • Thumb: 150x150
  • Post: 400x250
  • Post Fullwidth: 1080x675
  • Portrait: 400x516

Choosing any of the above options will force the module to load the corresponding image from the media library. These image sizes are fixed ratios and they will crop your image if it’s a different ratio.

Settings:

Effect > Pan & Zoom
Transition > Ease-in
Zoom Amount > 3.5x
Transition Speed > 1 secs
Opacity > 1
Media Image > Full

Images:

 

The Pan & Zoom Effect with fullsize (2768 x 4152) image.

For comparison this example uses the same uploaded image as the previous example except this time with the ‘Full Size‘ Media Image selected.

The actual image size is huge, at 2768 x 4152px and 1MB in size so that you can clearly see the difference in quality compared to the previous image.

Settings:

Effect > Zoom
Transition > Ease-out
Zoom Amount > 1x
Transition Speed > 0.6secs
Opacity > 0
Hover Opacity > 0.4
Media Image > Portrait

Images:

    

Zoom and Opacity with Background Image

In this example the initial image is hidden with a zero opacity setting showing a background image underneath. The opacity is increased to 0.4 on hover.

Note that the media library image settings have no effect on your background image. They will be full size.

The Image Zoom Module for Divi is a custom Image Module with a simple and effective Pan & Zoom hover effect. You will need the Divi WordPress Theme or The Divi Builder Plugin by Elegant Themes to use this plugin.

Only available at Elegant Market Place.

Image Zoom Module for Divi

Image Zoom Module for Divi

Use the Image Zoom Module with no effects for a quick Image with Text Overlay Module

Version 2.0.0 of the Image Zoom Module for Divi introduces full Visual Builder Support as well as some cool new settings including:

  • Media Library Images
  • Disable the Pan Effect
  • Background Options
  • Opacity Settings
  • Transition Style Option
Image Zoom Module for Divi

Image Zoom Module for Divi

A quick and easy Zoom Effect

The Media Library Image setting in Version 2.0.0 of the Image Zoom Module is used for displaying smaller versions of your uploaded image from the media library. There are a few image options to choose from:

  • Full Size
  • Thumb: 150x150
  • Post: 400x250
  • Post Fullwidth: 1080x675
  • Portrait: 400x516

Choosing any of the above options will force the module to load the corresponding image from the media library. These image sizes are fixed ratios and they will crop your image if it’s a different ratio.

Image Zoom Module for Divi

Image Zoom Module for Divi

The Pan & Zoom Effect with fullsize (2768 x 4152) image.

For comparison this example uses the same uploaded image as the previous example except this time with the ‘Post Fullwidth‘ Media Image selected.

The ‘post fullwidth’ image size is 1080x 675px. You can clearly see the difference in quality compared to the previous image which is 400x250px

Image Zoom Module for Divi

Image Zoom Module for Divi

Zoom and Opacity with Background Image

In this example the initial image is hidden with a zero opacity setting showing a background image underneath. The opacity is increased to 0.4 on hover.

Note that the media library image settings have no effect on your background image. They will be full size.

You can use a background video with and display it in the same way as the background image in the previous example.

You’ll need to view on desktop to see an example using a video background as these don’t generally work on mobile devices.

Settings:

Effect > Zoom
Transition > Ease-in
Zoom Amount > 1.2x
Transition Speed > 2secs
Opacity > 1
Hover Opacity > 0.6
Media Image > Portrait

Images:

Transparent .png with Background Video

You can use a background video with and display it in the same way as the background image in the last example.

For this example I am using a transparent png so that the video shows as a background to the static image.

Overlay Box

I’ve used a little custom CSS here for the overlay block behind the text area. This can be done in the Custom CSS boxes i the Advanced Tab where you can also find custom CSS boxes for Hover effects on the text container, title and subtitle fields.

Settings:

Effect > Zoom
Transition > Ease-out
Zoom Amount > 1.3x
Transition Speed > 0.3
Opacity > 1
Hover Opacity > 0.5
Media Image > Portrait
Background Color > #000000

Images:

My Gorgeous Cats – Katie (RIP) and Kelly

Custom CSS Settings

Add the code below for the same effect in the relevant input boxes found in the Advanced Tab

Title

opacity: 0;
transition: all 0.6s ease-out 0.2s;

Title Hover

opacity: 1;

This example only uses the Title field but you can achieve the same effect for the subtitle fields with the same code. 

Settings:

Effect > Zoom
Transition > Ease-in
Zoom Amount > 1.4x
Transition Speed > 0.5 secs
Opacity > 1
Hover Opacity > 0.6
Media Image > Thumbnail

Images:

 

Zoom Effect with thumbnail image size and rounded borders.

No Custom CSS for this one, just rounded borders, a background image and a zoom image of my beautiful face to make my mum proud; Created purely to encourage Mr Jesky to replace his buttons with my plugin. ☺ 

Settings:

Effect > Zoom
Transition > Ease-in-out
Zoom Amount > 1.7x
Transition Speed > 0.2
Opacity > 1
Hover Opacity > 1
Media Image > Medium

Images:

  

Zoom Effect with Custom CSS slide in overlay.
TIP: Hover over the bottom left corner 🙂

Custom CSS Settings

You can do quite a bit with a little custom CSS, here’s what I’ve done for this.

Main Element

overflow: hidden;

Content Container

transition: all .6s ease-in-out;
background-color: red;
height: 200%;
transform-origin: center;
transform: rotateZ(-45deg) translateX(-70%) translateY(10%);

Content Container Hover

transform: unset;
height: 100%;

Title

margin-top: -10px;
transition: all .2s ease-out .9s;
max-width: 110px;

Title Hover

transform: translateY(-5px);

Subtitle

transform: translateY(150px);
transition: all .3s ease-in-out .6s;

Subtitle Hover

transform: translateY(0);