Image Overlays

The UO Web Design framework offers three classes to easily apply a color tint to an image, video, or iframe to make it easy to increase text visibility for busier images:

  • overlay-image-tint--light
  • overlay-image-tint--medium
  • overlay-image-tint--dark

Overlay Tint (Light)

<div class="overlay-image-tint--light"> <image src="image.jpg"> </img> </div> 

A view of E 13th Avenue on the UO Eugene campus

Overlay Tint Light

Overlay Tint (Medium)

<div class="overlay-image-tint--medium"> <image src="image.jpg"> </img> </div> 

A view of E 13th Avenue on the UO Eugene campus

Overlay Tint Medium

Overlay Tint (Dark)

<div class="overlay-image-tint--dark"> <image src="image.jpg"> </img> </div> 

A view of E 13th Avenue on the UO Eugene campus

Overlay Tint Dark