EverWeb Widgets

Image & Captions

Responsive Caption Image — Responsive Image - Caption & Internal Link

Image Caption Below

The image is inserted with alt text and options for styling it with padding, a background color with opacity, a border and a box shadow.
When the box shadow is used, the image percentage width is reduced slightly and the vertical spacing should be set to at least the same as the shadow radius to allow the shadow to be displayed properly.
The image can be configured as an internal or external hyperlink and open in a new window if required.
Caption
In this case, the caption is positioned below the image. It can use a web safe font or a Google hosted or non web safe font with a web safe fallback. The container background color has an opacity slider and the caption can be styled for font size and color.

Styled Image

The image is inserted with alt text and options for styling it with padding, a background color with opacity, a border and a box shadow.
When the box shadow is used, the image percentage width is reduced slightly and the vertical spacing should be set to at least the same as the shadow radius to allow the shadow to be displayed properly.
There is a check box for changing a square image to round or a rectangular image to oval.
The image can be configured as an internal or external hyperlink and open in a new window if required.

Image Overlay Caption

The image is inserted with alt text and options for styling it with padding, a background color with opacity, a border and a box shadow.
When the box shadow is used, the image percentage width is reduced slightly and the vertical spacing should be set to at least the same as the shadow radius to allow the shadow to be displayed properly.
The image can be configured as an internal or external hyperlink and open in a new window if required.
Caption
In this case, the overlay caption has been selected and this can be styled for font, font size, color and background color with opacity adjustment.
There is a checkbox to hide the caption on computers and display it on hover if required.
The caption is displayed on page load when viewed on mobile devices.