Image Caption On Hover
The image is inserted in an HTML5 figure element with alt text and a figcaption. The caption animates in upwards on hover when the page is viewed on computers.
There is a control for allowing the caption to appear on page load when it is viewed on mobile touch devices where hovers don't work. If viewing this page on a computer, reduce the browser width to see the effect or use the browser's responsive mode.
If required, the image can be a hyperlink to an internal or external page with the option to open in a new window.
The caption can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
It can be styled for font size, color, background color and opacity, top/bottom and left/right padiing and text align.
The caption can be returned to a second line by using the html line break <br>
The caption is made visible to style it so there is a check box which must be checked to hide it before publishing the page.
The figure element has its overflow hidden so can have radiused corners. There are controls for border width, color and radius and box shadow radius and color.
The widget can be used on a full site which will also be viewed on tablet devices or on a mobile version of the site. It uses media queries to show the caption on page load when the device width is lower than the break point setting.
Set the break point to 1059 for an iPad in landscape mode, 799 for portrait mode and 599 for fixed width mobile phone website designs.