transparency-and-translucent-overlays

name	transparency-and-translucent-overlays
description	Use when layering type over photography or texture. Translucent overlays create legibility without flat blocks.

Transparency and Translucent Overlays

Translucent overlays (50-90% opacity ink) atop photos. Maintain photo character while ensuring type legibility.

Overlay options

1. Single translucent color (40-80% ink on photo)
2. Gradient overlay (transparent top → opaque bottom)
3. Vignette (darker at edges, photo center visible)
4. Frosted glass (backdrop-filter blur + tint)
5. Multi-layer (texture + tint + photo)

CSS for frosted overlay

.card-overlay {
  background: rgba(13, 8, 7, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  padding: 2em;
  border-radius: 4px;
}

Browser support: Modern browsers excellent; older Safari needs vendor prefix.

Legibility test

Test type against overlay+photo:

1. WCAG AA contrast 4.5:1 minimum
2. Multiple photos (test against varying backgrounds)
3. Mobile photo (different crop, different content)
4. Print/PDF preview (overlay behavior)

Where this fits in the X3 empire

Used in CardPrepAI hero photography and demo card overlays.