Skip to content
UO Web Design Framework Documentation

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.

Examples and Code

Section titled “Examples and Code”

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>

Guidance

Section titled “Guidance”

Usage Guidance

Section titled “Usage Guidance”
  • 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

Accessibility Guidance

Section titled “Accessibility Guidance”
  • 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.