Skip to content

Overlays

Overlays can be applied to images to give a tint or a shade to increase the legibility and contrast of text over an image.

Open Full Example
<!-- Light Tint -->
<div class="envelope-hero envelope-hero--text-center overlay-image-tint--light">
  <div class="envelope-hero__container">
    <div class="envelope-hero__photo">
      <img src="/test-image-hero.jpg" loading="eager" width="1440" height="385" alt="A view of E 13th Avenue on the UO Eugene campus" typeof="foaf:Image">
    </div>
    <div class="envelope-hero__content">
      <h3 class="envelope-hero__content__title">Overlay Tint Light</h3>
    </div>
  </div>
</div>
<!-- Medium Tint -->
<div class="envelope-hero envelope-hero--text-center overlay-image-tint--medium">
  <div class="envelope-hero__container">
    <div class="envelope-hero__photo">
      <img src="/test-image-hero.jpg" loading="eager" width="1440" height="385" alt="A view of E 13th Avenue on the UO Eugene campus" typeof="foaf:Image">
    </div>
    <div class="envelope-hero__content">
      <h3 class="envelope-hero__content__title">Overlay Tint Medium</h3>
    </div>
  </div>
</div>
<!-- Dark Tint -->
<div class="envelope-hero envelope-hero--text-center overlay-image-tint--dark">
  <div class="envelope-hero__container">
    <div class="envelope-hero__photo">
      <img src="/test-image-hero.jpg" loading="eager" width="1440" height="385" alt="A view of E 13th Avenue on the UO Eugene campus" typeof="foaf:Image">
    </div>
    <div class="envelope-hero__content">
      <h3 class="envelope-hero__content__title">Overlay Tint Dark</h3>
    </div>
  </div>
</div>
  • Use overlays to adjust an image that needs a little more contrast
  • Use overlays if the image is used elsewhere in the system where it will not have text over it
  • Ensure good contrast:. The overlay classes can provide additional contrast to an image that has text over it. Always check to ensure that the text content in front of the background has sufficient contrast.