Home > Media Blocks > 1.7 Overlay Image

Overlay Image

Overlay images allow authors to add dynamic overlays to image blocks. Headlines, sub copy and images can all be added as full height or 50% overlays. Editors can control overlay color, text, and opacity. Editors can also choose whether or not to include a call-to-action (CTA) prompt in their overlay.

System ref: GSD OVERLAY

1.0 Media

Overlay Image Samples

Simple Text Overlay

Settings: 70% opacity/Full height

An arial view of snowy forests on a mountain
Lorem Ipsum

Text with CTA

Settings: 85% overlay/Full height

Farm nestled within a forest on the outskirts of Higashikawa.
Lorem Ipsum
This overlay includes an optional clickable link.
Learn more

Image Overlay

Settings: Full height

A photo of the edge of a snowy forest
Harvard GSD Logo

Text with CTA

Settings: 100% opacity/Half height

A photo of red-crowned cranes
Lorem Ipsum
Praesent at auctor sem. Aliquam pharetra condimentum turpis, sed ultrices ipsum venenatis non.

Image Overlay

Settings: Full height

Traditional Ainu huts at the Ainu Living Memorial.
A photo of sculptures in a snowy forest

GSD Overlay Settings

The GSD Overlay block includes three types of overlays – Simple Text overlay, Text with CTA overlay, and Image overlay. All the settings are located in the Block Settings tab on the right-hand side. In the examples above, the GSD Overlay block has been set into two-column and three-column blocks to achieve the layout.

It is important to note that mobile and tablet users cannot access hover states, so they will only see the overlay if they click on the image. Because of this, use the overlay to present supplemental information, not essential information.

Screenshot of dropdown field where you can select the type of overlay you want.
Begin by selecting the type of overlay you want.
Screenshot of color, opacity, and height settings for the Simple Text Overlay.
Each overlay will include different setting options.

Setting Options

  • Overlay Type: Select what type of overlay you want from the dropdown. This should be chosen first since the rest of the settings will change accordingly.
  • Heading: Available in the Simple Text and Text with CTA overlays. Add the main heading for the overlay.
  • Text: Available in the Text with CTA overlay. Include 1-2 sentences of text about the image.
  • CTA Text: Available in the Text with CTA overlay. Add the link text in this field. To add the link URL, use the link icon in the block toolbar. Leave this field empty if you do not want the CTA to appear.
  • Background Image: Available on all overlay types. This is the main image for the block.
  • Color: Available in the Simple Text and Text with CTA overlays. You can customize the overlay color (background) and overlay text color. When choosing the color palette, consider the colors used on the rest of the site and make sure that your color choices meet AA accessibility standards.
  • Overlay Opacity: Available in the Simple Text and Text with CTA overlays. This controls the opacity level of the overlay color (background color). This is set as a percentage. Avoid reducing the opacity to a degree that it is difficult to read the text.
  • Half Height Overlay: Available on the Simple Text and Text with CTA overlays. Turn this on if you want the overlay to only cover half the height of the image. On mobile devices, this overlay may cover more than half the image height, depending on how much text there is.
  • Overlay Image: Available on Image overlay only. This is the image that will appear when a user hovers over the block. For best results, keep your overlay image the same size as the background image.