EverWeb Widgets HTML5

Animated Zoom Image

Image zoom on click thumbnail with hyperlink

Widget Settings

Thumbnail Imag Zoom
Click Thumb To Zoom Image

Zoom Animation On Thumbnail Click

The widget inserts a thumbnail image which zooms up another image when clicked.
The image zoom is animated and has variable timing.
The image sits over the page content until the visitor either clicks it to folllow a hyperlink or closes it by clicking anywhere on the page away from the image.
The fact that it works on click rather than hover makes it ideal for mobile devices too.
The size of the zoomed image, and its distance from the top of the browser window, can be varied.
The image can be a hyperlink to another page of the site and can have a caption. This means that several of these thumbnails can create an illustrated navigation.
The caption can be positioned in any corner of the image and its background opacity adjusted to improve visibility.

Images
The same image can be used for both the thumbnail and the zoomed image but it is better to create two. Both images should be cropped to the size that they will appear in the browser before importing them into EverWeb.

Thunbnail Image Zoom Widget

Widget Settings

Choose the thumbnail image, adjust its size and add alt text for SEO.
Set the thumbnail box shadow color and radius if required.
Choose the zoom image and enter alt text for SEO.
Enter the required width and height for the zoomed image and set the box shadow color and radius if required.
If an image caption is needed, enter it in the box provided and check the box to display it.
Set the caption font family, size, color and background opacity.
The caption position can be set using the Top/Bottom and Left/Right controls.
Enter the required animation speed in tenths of a second.
The image appears in the center of the browser window and the distance from the top can be set using the Position control. The value enter here is a percentage.
If the image is to be a hyperlink to another page of the site, use the "Link to:" control to set it.

Get The Widget