EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Image Text Overlay

Touch Image Text Overlay Widget
Touch Image Text Overlay Widget

Touch Image Text Overlay

The image is inserted with and overlay which has an opacity of zero.
When the button is clicked or tapped, the opacity is changed so that the text is revealed.
The opacity of the text container's background can be adjusted.
The text has an HTML heading and a paragraph.
The info button has adjustable background opacity and can be positioned at the bottom left or right and has adjustments for horizontal and vertical position.

Touch Image Text Overlay Widget
Touch Image Text Overlay Widget

Widget Settings

Choose the image, enter the alt text and adjust its size using the drag handles or the Metrics inspector.
Style the container border and/or box shadow if required.
Check the box to show the overlay.
Enter the heading and text. Use <br> for line breaks.
Set the padding, font family, color and background color.
Set the heading font size and text align.
Set the text font size, text align and line height.
Set the overlay background opacity and then uncheck the "Show overlay" box to hide it.
Enter the button text and set its font size, color, background color and opacity.
Set the button's padding and corner radius.
Set the button position - left or right - and its position horizontally and vertically.
Set the overlay animation time.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Image widget pack.