EverWeb Widgetbox

Image Hover Expand

Expand Image on Mouseover

Expand Image on Hover
Hover Image Expand Tooltip

This widget uses a tooltip to display an enlarged image when a thumbnail is hovered.

The enlarged image can be a larger version of the thumbnail or another image.

The same image can be used for both the thumbnail and the enlarged image if required although this is not the best way.

Create the images, crop, resize and name them before dragging them into the EverWeb Assets List.

Select the thumbnail, enter its width and height and then adjust the widget to suit.

Choose the large image and enter the required width. The height will adjust automatically.

Enter Alt Text for SEO for both images.

Choose the desired position of the large image in relation to the thumbnail. The options are topLeft, topRight, bottomLeft and bottomRight.

Finally use the Arrange menu to bring the widget to the front and, if the page containing the widget is in a directory, check the box.

A number of these thumbs can placed in a row, column or grid.

Get The Widget

Expand Top Right

Expand Top Left

Mobile Website

This widget can be used on mobile websites too. These devices don't have hover so the thumbnai has to be tapped to expand the image.

This widget has been adapted so that the expanded image can be dismissed on mobile devices by tapping anywhere else on the screen other than on the image.

Hover Image Expand WidgetHover Thumbnail Expand Image TooltipHover Expand Widget
Hover Image Expand WidgetHover Thumbnail Expand Image TooltipHover Expand Widget