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.
1 Comment
Submit a Comment
You must be logged in to post a comment.
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 releaseCheckout the documentation first and if you still need help open a support ticket.
View DocsPlease scroll down for the support form
This theme, layout 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.
*Support is provided by vendors directly.
Please login to access the support form. you can do so here
Hi use Body Commerce for my products i try much of plugin for get a zoom on the product page before buy it do you try it with bodycommerce
Or can i try it before purchase
Thanks
Patrice