EverWeb Widgets HTML5

Animated Zoom Image

Image zoom on click button with hyperlink

Widget Settings

Photo Button Zoom
Click Button To Zoom Image

Zoom Animation On Button Click

The widget creates a styled button which zooms up an 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 buttons can create an illustrated navigation.
The caption can be positioned in any corner of the image and its background opacity adjusted to improve visibility.

Click To Zoom

Widget Settings

Enter the button text, choose a web safe font and set the font size, color and the button background color.
The button width can be changed by altering its width using a drag handle or the Metrics inspector.
The height is adjusted by changing the value for top and bottom paddding. The minimum height should be 30px for pages that will be viewed on a mobile device such as a tablet or smart phone.
Set the corner radius and the box shadow color and radius if required.
Choose the 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 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