EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Hover Info Link

Touch Hover Info Link Widget

Info & Link On Hover

The widget creates an image overlay with two headings and a button link when the image is hovered.
Mouseover the image below to view the info overlay with hyperlink button.
If the page is viewed on a touch device, the overlay appears on page load.
An alternative click to open/close the overlay is shown on the next page which be used on the tablet and smart phone versions of the site where hovers don't work.

Touch Hover Overlay Link Widget

Widget Settings

Choose the image, enter alt text for SEO and adjust the widget size using the drag handles or the Metrics inspector.
Enter the first heading and adjust the value for "Top".
Do the same for the second heading.
Enter the button link text, set the button width, padding and distance from the top.
Choose the font family and set the font size and color for the various items.
Set the button border width, color and corner radius.
Choose the Link to: page and check the box if the link is to open in a new window.
Set the overlay background color and its opacity and the inset padding.
Adjust the hover overlay transition timing if required. The value can be anything between zero and 99. The smaller the value - the faster the transition.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Navigation widget pack.