image slide down info overlay

EverWeb Widgets

Build Better Websites
With EverWeb

Image Slide Overlay

The image can be fixed size or made responsive by checking the "Full Width" box in the Metrics inspector.
When viewed in the browser on a computer, the info overlay will slide down on hover. If the page is viewed on an iPad it will require a tap to reveal the overlay. The optional "i" button gives the visitor a clue that they should do something.
Overlay
The overlay has adjustable background color and opacity and the speed of the slide down animation can be set in milliseconds.
The overlay content consists of an h1 heading, a paragraph and a CTA style link tab.
The text area can have two or more lines by using <br> to create line breaks.
The items are spaced out vertically using a percentage value so that they will respond to changes in the container size when the item is made responsive.
The CTA tab can be configured as a link to an internal page or to an external page or file with the option to open in a new window.
Styles
The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The container can have a box shadow and/or a border if required.
NOTE: When the widget is inserted, the overlay is made visible to allow styling and positioning of the elements. There is a checkbox control to hide the overlay and its contents before publishing

© EverWeb Widgets -

EverWeb Widgets