Info Overlay

Every image on a website needs a text description - if not for the visitors at least for the search engines! Rather than appear below the image and take up space. this widget creates an overlay with heading, text, optional extra text and a link. The overlay can be open or hidden at page load and is triggered by an info icon at the top right.
Images
The image is centered with a maximum width setting and there is an option to insert a smaller image file for mobile devices. This demo has the maximum width set to 960px so the larger image was cropped to this width and the smaller one to 600px wide before importing into EverWeb.
The images are inserted using the HTML5 <picture> element rather than in the background so that an alt text attribute can be inserted.
Container & Wrappe Styles
The container can have a border and/or a box shaow and the corners can be radiused if required.
The wrapper has controls for background color and its opacity and horizontal and vertical spacing to allow a box shadow to show.
Overlay
The overlay has controls for background color and opacity and has the info icon in the top right corner. The icon color, hover color and background color can be adjusted.
Info
The overlay has an HTML5 <article> element with a heading, text and an optional link. There is a span for extra text that will be hidden on mobile phones to stop it overflowing the container.
The text can use a non web safe or Goog;e hosted font with a web safe fallback if required and the link can open internal or external and has a new window option.