Open/Close Overlay

Images need a caption and a text description inserted in the same container to get indexed properly by the search engines. This can be added as an overlay to save space.
Hovers aren't much use nowadays since more than 50% of a websites visitors are using touch devices like tablets and mobile phones. However, hovers can be usefull for desktop and laptop users.
This item has an overlay which animates in on hover when viewed on computers. On mobile devices, an info icon appears at the top right to toggle the overlay open/closed.
Images
The image is inserted in two sizes for computer and mobile. The images used in this demo are 1200px and 800px wide. The images are inserted using the HTML5 <picture> element and there is a field for entering alt text for the search engines. The image's overall width can be set as a percentage and it can have a border and/or a box shadow.
The full width container has controls for adjusting the background color and its opacity and the vertical spacing from the items above and below.
Overlay
The overlay has a heading and text and an optional link. The heading and text can have an optional line separator which has a width control.
The link can be configured to open internal and external pages and has a new window option. There is a control for adjusting the vertical spacing of the items in the overlay.
Two Images
The item shown below is a two image version where the images sit side by side on browser/screen widths above the break point and stack vertically on devices with screen widths below the break point.
Each item has the same features as the single image version except the image is inserted in only one size. The images used in this demo were cropped to 800px wide before importing into EverWeb.