EverWeb Widgets HTML5

Hover zoom image grid

Photo Grid Hover To Zoom

Variable Speed & Scale

This widget is similar to the one one the previous page in that it creates an image grid where the individual images can be scaled up, in this case, on hover rather than on click.
This grid is NOT suitable for using on smart phone sites and on conventional ones which are designed to work on tablets.
The images can be arranged in either three or four columns by changing their percentage width.
The transition speed and the image scale can both be varied.
The images should be imported into EverWeb at at the same size as the expanded image view for best results.

Widget Settings

Drag the widget onto the page and load the images by either dragging them all onto the Assets list in the widget settings panel from a Finder folder or by dragging them into the EverWeb Assets list and selecting them one by one using the "Choose" button.
Highlight each image file name in turn and enter alt text for SEO.
Select to display the images in either 3 or four columns by setting the Columns control to either 32 or 24. These values are percentages.
Set the transition speed in tenths of a second and the animation scale amount to a suitable value.
Use the "Arrange" menu to bring the widget to the front before publishing the page.
It's best make sure the expanded images do not move out of the page content width (viewport).

Widget Settings

Photo Grid Hover
Photo Grid Hover To Zoom

Get The Widget
alt alt alt alt alt alt alt alt