Lightbox Setup

The widget above is the Lightbox Link widget. Click it to see the demoes and read about the setup below …
The responsive image is inserted in two sizes - one for computer and tablets in landscape mode and the other for tablets in portrait mode and mobile phones. The images are inserted using the HTML5 <picture> element to allow different sizes and an alt text attribute for inserting keywords for the search engines.
The overlay uses a grid layout to center the caption and optional underline and there is an optional link icon at the top right corner. The overlay can be set to appear at page load or on hover when viewed on computers.
Images
The images in this example were cropped to 1200px and 800px wide respectively before importing into EverWeb. The images can have a border if required.
Caption
The caption can use a web safe font or a non web safe or Google hosted font with a websafe fallback. There are controls for font size, mobile font size, font weight and style, letter spacing and mobile letter spacing.
The optional line has control for color and vertical spacing on computers and mobile. The optional icon has a color control.
Link
The HTML5 <figure> element that contains the image and overlay is configured as a link. It can open internal or external pages or files and in a new window if required or a lightbox window with an image, slideshow, MP4, Vimeo or YouTube video.
Overlay
The overlay has controls for setting it to appear on hover on computers and for the background color and its opacity when viewed on computers. There are separate controls for setting the mobile overlay color and its opacity.
Padding
Both the top/bottom and left/right padding can be adjusted. There are separate controls for the mobile padding.
The container is centered with a maximum width setting and controls for adjusting the background color and its opacity.