• Your cart is empty.

Image Zoom Module for Divi

Another excellent product by Hædworm

*Support is provided by vendors directly. Please click here to access support for individual products
For payment or licensing issues, please click here to access EMP Support

Changelog

= 2.0.0: July 12, 2018 =

** Improvements **
– Added VB Support
– Images are now sized automatically.

** Changes **
– Removed the Image Height Setting as no longer required.
– Added a zero value to the Zoom setting so you can now Zoom out completely on hover to reveal a background image, color, gradient or video (set in the Background options).

** New Features **
– Added Title and Alt Text fields to the Image Upload Area
– Added Image Size setting so you can use various media library images instead of the full size image.
– Added the option to choose between Zoom or Pan & Zoom.
– Added a zero value to the Zoom setting so you can now Zoom out on hover to reveal a background image, color, gradient or video (set in the Background options).
– Added opacity setting to change the opacity before and after hover to reveal or hide a background image, color, gradient or video (set in the Background options).

= 1.0.0 –  Mar 01, 2018 =
* Initial release

The Image Zoom Module is a custom Divi image module featuring a Pan & Zoom effect on hover.

Using the module is easy.

Simply choose an image from the media library or enter the url of an image online. Choose which size image to output on the front end from the various options available in the module. Add Alt and Title tags as required.

Add a link URL, a Title and Subtitle if required. These are centered vertically by default (using CSS Flex) and are adjustable in the Custom CSS Settings.

Switch on the Zoom Effect or Zoom and Pan Effect and set the Zoom Amount and transition Speed in the Zoom Settings tab.

How does it work?

The image you select is used as a background image and unlike the standard image module there is no lightbox option. A small JS snippet sets your chosen Zoom level on hover at the selected transition speed, scaling the image up or down using a simple CSS transform. The Image will also Pan in relation to the position of the mouse cursor when the Pan effect is enabled.

The two text fields are optional and can be used to display text over the image.
Adding a link to the Link URL field will make the entire module clickable and you can do this with or without using the Title or Subtitle.

Other Settings

In version 2.0.0 you can now add a background color, gradient, image or video and reveal or hide them on hover with the new Opacity options in the Zoom Settings Tab.

The usual Divi settings for the text fields are included, as well as padding, margin, box-shadow, border and animations and filters.

Advanced Tab Custom CSS

The Custom CSS boxes in the Advanced tab consist of the main element, the text content container and both of the text fields. There is also a Custom CSS box for the text content container hover state, as well as hover states for the Title and Subtitle fields.  This makes it very easy to animate the Title and Subtitle text. Check out the Demo page for some examples.

Licensing

This theme or plugin is comprised of two parts.

1. The PHP code and integrated HTML are licensed under the General Public
License (GPL). You will find a copy of the GPL in the same directory as this
license file.

2. All other parts, including but not limited to the CSS code, images and design are
copyrighted by the vendor concerned and are NOT licensed under GPL.

This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own, in part, or as part of a larger project including that being part of a hosting offer. Distribution of source files is not permitted.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible unless the plugin or theme is unusable in your set up – we will require proof of this – please ensure that the product you are buying will do the job you want it too. In the case of Divi and Visual Builder compatibility – some plugins do not yet have 100% VB compatibility. Please check descriptions thoroughly to ascertain VB compatibility. Whilst every effort is made by our vendors to ensure compatibility with other themes, plugins and or web servers. This can never be guaranteed due to the many thousands of iterations in the wild. Please do not be afraid to ask the vendor for support by visiting the product page and clicking the relevant link.

 

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

Licensing

This theme or plugin is comprised of two parts.

1. The PHP code and integrated HTML are licensed under the General Public
License (GPL). You will find a copy of the GPL in the same directory as this
license file.

2. All other parts, including but not limited to the CSS code, images and design are
copyrighted by the vendor concerned and are NOT licensed under GPL.

This license allows the item to be used in projects for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own, in part, or as part of a larger project including that being part of a hosting offer. Distribution of source files is not permitted.

We understand that there can be issues whilst utilizing out of date browsers. Please ensure you use up to date browsers when using our vendors products. For DIVI Theme – Third Party Plugins may not perform as desired in the Divi Visual Builder. We are working with our vendors to rectify this situation as quickly as possible. With the release of Divi 3.1 developer documentation and SOME support of third party modules and plugins are now accessible through the visual builder. 

Please be aware that you will need an amount of experience in the master theme that you are using in order to take advantage of our themes and plugins.
Please make your decision to purchase based upon your skill level to see if our products fit your needs. Due to the nature of Digital Downloads, Refunds are not possible unless the plugin or theme is unusable in your set up – we will require proof of this – please ensure that the product you are buying will do the job you want it too. In the case of Divi and Visual Builder compatibility – some plugins do not yet have 100% VB compatibility. Please check descriptions thoroughly to ascertain VB compatibility. Whilst every effort is made by our vendors to ensure compatibility with other themes, plugins and or web servers. This can never be guaranteed due to the many thousands of iterations in the wild. Please do not be afraid to ask the vendor for support by visiting the product page and clicking the relevant link.

 

The Image Zoom Module is a custom Divi image module featuring a Pan & Zoom effect on hover.

Using the module is easy.

Simply choose an image from the media library or enter the url of an image online. Choose which size image to output on the front end from the various options available in the module. Add Alt and Title tags as required.

Add a link URL, a Title and Subtitle if required. These are centered vertically by default (using CSS Flex) and are adjustable in the Custom CSS Settings.

Switch on the Zoom Effect or Zoom and Pan Effect and set the Zoom Amount and transition Speed in the Zoom Settings tab.

How does it work?

The image you select is used as a background image and unlike the standard image module there is no lightbox option. A small JS snippet sets your chosen Zoom level on hover at the selected transition speed, scaling the image up or down using a simple CSS transform. The Image will also Pan in relation to the position of the mouse cursor when the Pan effect is enabled.

The two text fields are optional and can be used to display text over the image.
Adding a link to the Link URL field will make the entire module clickable and you can do this with or without using the Title or Subtitle.

Other Settings

In version 2.0.0 you can now add a background color, gradient, image or video and reveal or hide them on hover with the new Opacity options in the Zoom Settings Tab.

The usual Divi settings for the text fields are included, as well as padding, margin, box-shadow, border and animations and filters.

Advanced Tab Custom CSS

The Custom CSS boxes in the Advanced tab consist of the main element, the text content container and both of the text fields. There is also a Custom CSS box for the text content container hover state, as well as hover states for the Title and Subtitle fields.  This makes it very easy to animate the Title and Subtitle text. Check out the Demo page for some examples.

General Note: You MAY need to purchase the Divi Theme or the Elementor page builder to use this product. Please see the product description notes above for more information.

You may also like these items

Support Request

You have questions about your purchased plugin, theme or layout? Then use this form to get your answers as soon as possible. If you have a license key, please enter it here. You can find it in your account under "view details and downloads". Otherwise, please use the purchase id from your transaction. You can find them in the first column in your purchase history (ID).

11 + 15 =

0 Comments

Submit a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

External links on this website may be affiliate links that could result in us receiving compensation (payment) when you purchase a product or service from that link. For example, we may receive pay per click revenue or commission on sales of products. This helps us to pay the bills and deliver great content for you to enjoy when you are browsing these web pages. You do not pay any extra fees for these items.

By purchasing a product from The Elegant Marketplace you are agreeing to these terms. We do not offer custom support queries, although suggestions will be accepted and acted upon if possible. We do hold data that allows us to connect with you for product updates when you purchase a product. This is not an email marketing list. Should you wish to sign up to our marketing list, please visit our homepage where you will see an optin - We send out around two emails a week to keep you informed of product updates, You may opt out of our marketing communications at anytime by using the unsubscribe facility found at the bottom of each email.

Get the latest news!

Join our mailing list to receive the latest news and updates from our team and a 15% discount code on all products you can add to your cart as a thankyou gift. 

Thanks, we appreciate your support

Pin It on Pinterest

Share This

    Support Form


    The author will normally get back to you within the next 48 hours. All requests are processed one after the other. If you do not receive an answer within this time, please check your spam folder and make sure that you have entered the correct email address.

    You can help us to help you faster. If errors occur, first deactivate all plugins and go back to the parent theme if you are using a child theme (which you should). Check again. Then first turn on your child theme again and then step by step your plugins. Check again every time. Where does the error occur? You can also enable debug.log to get more information to share with us. Use the following snippet to write the debug.log to your "wp-content" folder: Enable debug.log

    Please submit some screenshots showing the problem. The JPG and PNG format and several files are allowed (optional).

    13 + 1 =