EverWeb Widgetbox

Slide In Caption

HTML5 Figure Tag & CSS Transitions

The image is inserted using the HTML5 figure element along with the figcaption tag. The captions can slide in from the top, right bottom or left using CSS3 transitions.

Like most of the widgets in this section, it is only suitable for websites that are going to be viewed in modern browsers which support both HTML5 and CSS3.

Slide In Image Caption Hyperlink
Slide In Caption Widget
Click Me!
Slide In Caption Widget
Click Me!
Slide In Image Caption Widget

The widget settings are shown to the right.

Select the image and adjust the size.

Enter Alt text for SEO and the caption text.

Choose a web safe font and set the size and color.

Select which direction the caption is to slide in from - left, top, right or bottom.

If the image is to be a hyperlink, enter a relative or absolute file path and check the box if the link is to open in a new window.

See THIS page for info about file paths.

See THIS page for a widget which will also insert an image using <figcaption> except the caption is always visible. Using the figure element to insert an image and its related caption is far better for SEO than using an img tag and a text box caption.

Get The Widget