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>
Overlay Tint Light
Overlay Tint (Medium)
<div class="overlay-image-tint--medium"> <image src="image.jpg"> </img> </div>
Overlay Tint Medium
Overlay Tint (Dark)
<div class="overlay-image-tint--dark"> <image src="image.jpg"> </img> </div>