Slant system — the feature showcase
Every panel is one <a class="slant">. Hover any panel — it grows and its eyebrow · title · meta · description · bullets reveal. All levers below are classes, so they survive PhotoDeck untouched: cascade · gu · lock · wash · solid · mosaic · mirror · is-open · is-current.
01 · FOCAL — watch the image MOVE. Same photo in all five; object-position slides the cover-crop hard, X 0→100. The subject walks across the frame.
↗object-positionX 0%
↗object-positionX 25%
↗object-positionX 50%
↗object-positionX 75%
↗object-positionX 100%
02 · THE FULL PANEL — five panels, every one carries the full stack. Hover to grow + reveal; center is pinned open (is-open) so you see it at rest. slant--cascade staggers the bullets in.
↗On-locationEventsA mobile studio for rapid capture and real-time delivery.- Tethered + instant retouch
- Branded sponsor galleries
↗Birmingham studioStudioStructured, guided sessions — controlled light, hand-painted backdrops.- Actors, authors, founders
- Commercial-ready files
↗Full event flow · Candid-ledCoverageAccurate, intentional coverage of speakers, audience and the high-value moments.- Behind-the-scenes context
- Brand visibility + crowd energy
↗Company cultureBrandingShow your culture, owners and team — proof of who you are.- The ultimate visual value
- Culture on display
↗Cross-industryEditorialHigh-caliber visual production and scalable asset creation across industries.- Editorial features
- Office transformations
02 · ORIENTATION — swap .lane for .vert and panels stack into columns. A slant-row holds verts beside a .slant-fill that takes any content (copy, hero, form).
Verticals for tall spaces
A .vert column suits a sidebar, a hero rail, or a “pick a path” hub. Set the width class (vert--2/3/4) and drop it in a .slant-row next to any block of your own content — here, this paragraph fills the other two-thirds.
03 · TEXT PLACEMENT — text-align + align-items + justify-content on the .slant_b wrapper. Bottom-left = caption, dead-center = hero, top-right = tag.
04 · TITLE LINES — long titles clip at narrow rest. -webkit-line-clamp on .slant_t sets how many lines show. Default 2 vs a 3-line bump.
↗default: clamp 2Industry & Editorial Assignments
↗clamp 3 linesIndustry & Editorial Assignments
↗or: short titleEditorial
05 · WASH + SOLID + GU — slant--wash floods a photo with the brand-plum gradient. slant--solid = a flat brand field (background:#hex). slant--gu golds the title.
↗wash · plumBrand Wash
↗solid · plumStart a Project
↗solid · russetBuy a Print
↗solid · coniferWork With Me
06 · LOCK — slant--lock keeps CTA text put & legible as the panel grows (edge-aware). Flat fields via background:#hex.
07 · MOSAIC — the headline feature. .mosaic fuses stacked lanes into ONE tiled wall with a seam; alternate a mirror row for a parquet chevron.
09 · TYPE TREATMENT — the title's look rides raw props on the spans (the --t dials get stripped; these survive). Underline, scale, tracking, colour — per panel.
10 · TEXT RHYTHM — line-height sets leading, gap spaces the eyebrow/title/meta, font-size sizes the body. Pinned open so you read them at rest.
↗tight leadingDense Editorial StackLines pull close for a compact, editorial block of copy.
↗wide gapAiry & OpenExtra gap lets every element breathe apart.
↗large bodyLead ParagraphA bigger description reads as a lead, not fine print.
11 · YOU-ARE-HERE — a lane as in-page nav. Mark the live page is-current: plum wash + gold eyebrow say “you are here.”
12 · STATIC INDEX — add is-static to the lane and every panel stays equal, no hover-grow. A fixed index or contact sheet.
13 · POSITION GLOW — every panel carries an automatic halo by position: plum, rose, russet, conifer — then the cycle repeats. Watch the corners on hover.
14 · PICK A PATH — slant-row stacks vertical columns side by side. vert--3 builds a three-path hub; vert--4 packs a fourth.
15 · MIXED MOSAIC — the universal fuse: a lane and a vert-row tile into ONE seamless wall, seams and all.
16 · N-SCALE — the reveal mechanic makes width on demand, so the full stack scales to ANY count. Seven panels; hover still gives the active one room. Scroll in and they rise (slant-rise).
↗01One
↗02Two
↗03Three
↗04 · openFull Stack HoldsEven at seven across, the active panel carries the whole story.- Reveals on hover
- Width on demand
↗05Five
↗06Six
↗07Seven
Real content · drop-in ready
Photography that does the work
12+ years, trained classically in photojournalism — on film. Studio and on-location, out of a downtown Birmingham loft. Official Media Partner of the 2022 World Games, where I assembled and led 13 Alabama photographers. Hover a service to open it.
↗On-location · Travel-readyHigh-Volume Event PortraitsA high-tech mobile studio for rapid capture, instant processing and real-time delivery — guests walk away with finished images before they leave.- Tethered capture + instant retouch
- Branded galleries & sponsor displays
↗Birmingham studio · Career portraitsStudio PortraitsStructured, guided sessions for owners, brands, actors and post-grads building a professional identity.- Commercial-ready files
- Hand-painted backdrops
↗Full event flow · Candid-ledEvent CoverageAccurate, intentional coverage of speakers, audience, posed groups and the high-value moments.- Behind-the-scenes context
- Brand visibility + crowd energy