EverWeb Widgetbox

Hover Image Zoom Expand
Hover Image Zoom

Hover Zoom Image

This image zooms out from the center of thumbnail using CSS transform. The image needs to have sufficient resolution for the amount of magnification. If the zoom image is to stay within the boundaries of a 980px wide web page then it should be imported to the Assets at about 960px wide.

Crop the image to the required size and drag it into the Assets List.

Choose the image file, enter the required small image size and then adjust the widget to fit.

Enter alt text for SEO.

Set the transition duration time and the required amount of magnification.

Experiment with these settings to get the desired effect.

Before publishing the web page, select the image and bring it to the front using the Arrange menu.

NOTE: Since this widget uses CSS transform, the zoom effect will only work in modern browsers. The latest versions of the major browsers support these.

Zoom Using CSS

Get The Widget
Hover Zoom Widget

Use the Hover to Zoom Photo Grid widget if several hover zoom images are required on a page.