Image Zoom Custom Module
Generate a cool Pan and Zoom effect for your images and combine with a text overlay using a Title and Subtitle field which are centred horizontally and vertically by default (using CSS Flex). You can adjust the position using the Custom CSS boxes in the Advanced tab of the module if required.
Setting up the Image Zoom Module.
Simply choose an image from the media library or enter the url of an online image (make sure you have permission if choosing the latter).
Add a link URL, a Title and Subtitle if required.
Switch on the Zoom Effect and set the Zoom Amount and transition Speed in the Zoom Settings tab.
Set the width and height of the module and adjust any design settings for your text fields and you’re done.
How does it work?
The image you select is used as a background image and unlike the standard image module there is no pop-up option. Instead, a small JS snippet sets your chosen Zoom level on hover at the selected transition speed, scaling the image up using a simple CSS transform and Panning the image in relation to the mouse cursor position. 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.
Because the image is used as a background image a height setting is used to set the height of the module. This is best set lower than the height of the image you are using.
The usual Divi settings for the text fields are included, as well as padding, margin, box-shadow, border and animations. There are no filter options for this module and there is no alt tag as the module uses a background image. There is however a title tag provided which is applied to the background image container
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 which should make it easy to animate the Title and Subtitle into view on hover.