EverWeb Widgetbox

Text Wrap Around Hover Expand Image

Text Wrap Expand Image on Hover
ThumbnailText wrap around hover expand imageExpand Wrap Widget

Another variation of text wrap around an image, this widget uses a tooltip to display an enlarged image from a thumbnail on mouseover.
The enlarged image can a bigger version of the thumbnail or another image.
The same image can be used for both the thumbnail and the enlarged image if necessary although this is not the best way to do it.
Crop, resize and name the images before dragging them into the EverWeb Assets list.

Choose the thumbnail and the enlarged image and enter alt text for SEO.
Enter or paste the wrap around text into the box and click the Apply button. Use <br /> to create line breaks and two of them together for a paragraph break like this
<br /><br />

Use the HTML for an ampersand like this - &amp;
Drag the widget to the required width or use the Metrics inspector & adjust the height to suit.
Adjust the percentage width of the thumbnail in relation to the width of the widget box.
Set the requireed width for the enlarged image. This can be the same as the widget box width to prevent overflow.
Choose a web safe font, font size and color and check the box if the page with the widget is in a directory.

Every time text is entered into the box, or any changes made, the Apply button must be clicked before deselecting the widget. Otherwise, any changes will be lost.

This widget has been adapted to work with mobile devices like the iPad/iPhone which don't support hover. On these devices, the image will appear when the thumbnail is tapped and can be hidden by tapping anywhere else on the screen.

NOTE: After entering text into the box, make sure the Apply button is clicked before deselecting the widget. Otherwise the changes will be lost.

Get The Widget