📸 Photo Studio

Standard headline treatments — the default tier (~60% of cards)

1 · Headline on photo (gradient scrim)

Nöje

Festivalsommaren är äntligen här

/* the everyday hero: text on the photo, made readable by a scrim */
.hero{position:relative;color:#fff}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%);}  /* readability floor */
.hero h1{margin:0;font:800 28px system-ui;text-shadow:0 1px 12px rgba(0,0,0,.5)}

The bread-and-butter card: headline sits directly on the image. How: a bottom-up linear-gradient scrim (or a text-shadow) guarantees contrast no matter what the photo does underneath. Add a small uppercase kicker in the section colour above the headline. Watch: never skip the scrim — white text on a bright photo is the classic readability fail.

2 · Headline on a colour plate

Musik

Rekordpublik på årets festival

/* solid section-colour box sitting on the photo — max readability */
.plate{position:relative}
.plate .box{position:absolute;left:16px;right:16px;bottom:16px;
  background:#1f3a6b;color:#fff;padding:12px 15px;border-radius:8px;}  /* swap colour per section */
.plate h1{margin:0;font:800 26px system-ui}

Headline drops onto a solid colour plate over the photo — the safest, highest-contrast default, and the plate colour doubles as the section signal. How: an absolutely-positioned block with the section background; the photo stays clean above it. Watch: works on any photo (the plate carries the text), so it's the go-to when the image is busy or low-contrast.

3 · Lower-third bar

Hien om landslagsdrömmen

/* TV-style strap across the lower third */
.lower .bar{position:absolute;left:0;right:0;bottom:16px;
  background:rgba(15,17,21,.76);backdrop-filter:blur(3px);
  border-left:4px solid var(--accent);padding:9px 15px;}

A translucent strap across the lower third with an accent edge — reads as "broadcast/now". How: a full-width semi-transparent bar with backdrop-filter:blur so the photo stays visible through it, plus a coloured border-left as the section tick. Watch: keep it to the lower third so it never covers the subject's face.

Signature moves — the feature & showstopper tiers

4 · Knockout headline — photo through the type

FESTEN

/* headline becomes a window onto the photo */
.knockout{
  background: url(/photo.jpg) center/cover;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font: 800 12vw/.85 system-ui, sans-serif;
}

The text is transparent and the photo shows through the letters — type and image become one object instead of two stacked rectangles. How: paint the photo as the element's background, then background-clip:text + color:transparent clips that paint to the glyph shapes. Watch: needs a busy, tonal photo behind it; on a flat sky it reads as nothing — always keep a solid-colour fallback for contrast.

5 · Duotone recolour (section colour system)

/* grayscale base + two blend layers = live duotone, no re-render */
.duo{position:relative}
.duo img{filter:grayscale(1) contrast(1.05)}
.duo::before{content:"";position:absolute;inset:0;
  background:#1f3a6b; mix-blend-mode:multiply;}   /* shadows */
.duo::after{content:"";position:absolute;inset:0;
  background:#b5197a; mix-blend-mode:lighten;}     /* highlights */

Crush the photo to two colours where the second colour is the section (politics = blue, culture = magenta) — the Axios/Bloomberg wayfinding trick. How: grayscale the image, then a multiply layer tints the shadows and a lighten/screen layer tints the highlights. Recolour per section by swapping two hex values — no new image. Watch: lock the palette and reserve it for a tier of stories, or it stops meaning anything.

6 · Text behind the subject (depth headline)

MÅLET

/* 3 stacked layers: bg photo · headline · transparent cutout on top */
<div class="depth">
  <div class="bg"></div>          /* the photo */
  <h1>MÅLET</h1>                  /* real text, z between */
  <img class="cut" src="cutout.png"> /* from POST /v1/cutout */
</div>
.depth{position:relative}
.depth .bg,.depth img.cut{position:absolute;inset:0}
.depth h1{position:absolute;z-index:1}
.depth img.cut{z-index:2}        /* subject in front of the word */

The headline passes behind the person's head and shoulders — the most-shared "premium" trick of the last two years. How: stack three layers — background photo, then the headline, then a transparent cutout of the subject (the /v1/cutout PNG from §1 of this API) on top with a higher z-index. This is where the API and the CSS meet: the cutout above is a live BiRefNet cutout of the photo behind it. Watch: keep 60–70% of each word clear of the subject so the headline still reads.

7 · Weight-on-scroll headline

Rösterna räknas

/* type reacts to the reader — scroll-driven, no images */
@keyframes weigh{ to{ font-variation-settings:"wght" 900 } }
h1.scrolly{
  animation: weigh linear both;
  animation-timeline: view();   /* Interop 2026 */
}
@media (prefers-reduced-motion:reduce){ h1.scrolly{animation:none} }

The headline morphs thin → black as you scroll past it (scroll up and down to see it breathe). How: a keyframe animates font-variation-settings (a variable font) or font-weight, driven by animation-timeline: view() so the reader's scroll is the timeline — no JS. Watch: features only, and always give a static fallback via prefers-reduced-motion (done above).

8 · Before / after slider

/* drag the handle — comparison is an argument */
.slider .after{position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--p,55%)) 0 0);}  /* reveal width */
<input type="range" oninput="
  this.closest('.slider').style.setProperty('--p',this.value+'%')">

Two versions of one photo with a draggable seam (före | efter, edit | original, lag A | lag B). How: stack the "after" copy over the "before", then a range input writes a CSS variable that drives a clip-path: inset() reveal — one line of inline JS, no library. Watch: label both sides or the comparison is ambiguous.

9 · Scanlines / CRT overlay (pure CSS)

/* "archive / surveillance / broadcast" mood in one line */
.scan::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.28) 0 1px, transparent 1px 3px);}

Horizontal CRT rows signal "caught on camera", retro, or surveillance. How: a single repeating-linear-gradient on a ::after overlay — no image, no JS. Drift it with a slow keyframe for live VHS. Watch: keep it subtle (opacity ~.15–.28); it's seasoning, not the dish.

Typographic plays — text & type as the hero

10 · Hollow / outlined headline

/* transparent letters with an outline — photo shows in the counters */
.stroke h1{
  color: transparent;
  -webkit-text-stroke: 2.5px #fff;   /* the outline does the reading */
  font: 800 90px system-ui;
}

The inverse of knockout: letters are hollow with a crisp outline, so the photo reads inside and around the type. How: color:transparent + -webkit-text-stroke over the image. Watch: only works at large, bold weights — thin fonts lose the outline; pair with a slight scrim on busy photos.

11 · Self-contrasting headline (blend)

/* the headline inverts against whatever is behind it — always legible */
.blend h1{ color:#fff; mix-blend-mode: difference; }

White text set to mix-blend-mode:difference inverts against the pixels beneath, so it stays readable over light and dark areas with no scrim. How: one property; the browser composites the headline against the photo. Watch: the colour shifts with the image — great for auto-contrast, less so when you need an exact brand colour.

12 · Text wraps around the subject

Reportageblocket flödar runt motivets verkliga silhuett i stället för en fyrkantig bild. Texten följer konturen av den utklippta personen — en tidskriftslayout rakt i flödet, utan manuell radbrytning. Detta binder ihop bild och brödtext till en komposition: ögat läser personen och stycket som en enhet, precis som i ett magasinuppslag. Effekten skalar med spaltbredden och faller tillbaka till en vanlig vänsterflyt om webbläsaren saknar stöd.

/* body text flows around the cutout's real silhouette */
img.float{
  float: left;
  shape-outside: url(cutout.png);   /* uses the PNG's alpha = the silhouette */
  shape-margin: 14px;
}

Body copy hugs the cut-out person instead of a rectangle — pure magazine. API tie-in again: shape-outside reads the alpha channel of the /v1/cutout PNG, so the text follows the actual silhouette. Watch: the cutout must be same-origin; keep a normal float fallback for old browsers.

13 · Oversized numeral

/* a giant translucent figure as graphic texture behind the label */
.num .big{position:absolute;font:900 300px system-ui;
  color:rgba(255,255,255,.17);}   /* rank / count / score as design */

A huge semi-transparent numeral turns a rank, score or count into the composition (lists, election seats, sports results, "del 3"). How: an absolutely-positioned oversized figure at low opacity behind the real headline. Watch: let it bleed off an edge — a contained number looks like a typo, a cropped one looks designed.

14 · Vertical / spine label

/* headline runs up the edge, magazine-spine style */
.vert h1{ writing-mode: vertical-rl; }

A kicker or section label set vertically up the photo's edge — frees the whole frame for the image and reads as "premium magazine". How: writing-mode: vertical-rl (add rotate for bottom-up). Watch: short words only; vertical body text is unreadable.

15 · Highlighted keyword

/* marker swipe on the one word that carries the story */
mark{ background:#b5197a; color:#fff;
  box-decoration-break: clone;   /* swipe survives line-wraps */
  padding:1px 5px; }

One word gets a marker/plate in the section colour — the eye lands on the point before reading the rest. How: wrap the keyword in <mark>; box-decoration-break:clone keeps the highlight clean when the word wraps. Watch: exactly one highlight per headline, chosen deliberately.

16 · Pull-quote over a portrait

/* oversized quote mark as a graphic, quote over the face's negative space */
.quote::before{ content:"\201D"; position:absolute;
  font:900 220px Georgia,serif; color:rgba(255,255,255,.2); }

A spoken line set big over the subject, anchored by a giant decorative quotation mark. How: a ::before glyph as texture + an italic serif blockquote placed in the photo's calm area. Watch: keep the quote off the face; lean on the portrait's negative space.

17 · Gradient-clip headline (neon energy)

/* fill the type with a gradient instead of a photo — markets/nightlife energy */
.neon h1{
  background: linear-gradient(90deg,#7be0a3,#5cc8ff,#b5197a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

Same clip trick as knockout, but the fill is a gradient — high-energy for economy/markets, culture and nightlife. How: a linear-gradient background clipped to the text, over a darkened photo so it glows. Watch: energy signal — keep it off hard news and tragedy (same tone-match rule as the sticker/glitch effects).