Stratigraphy Timeline
Vertical hover-expand archaeological cross-section. Each layer is a geological era — flex-grow reveals finds when hovered, with a depth ruler on the left and an artifact card panel on the right. Built for museum dig reports, geological surveys, and historical site catalogues.
Stratigraphy Timeline the 1st of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tl1-wrap">
<header class="tl1-head">
<h2 class="tl1-title">Dig Site <em>K-7</em><br>Anatolian Plateau</h2>
<div class="tl1-meta">
<strong>EXCAVATION LOG · SEASON 04</strong>
42°14′N 33°08′E · Lead: Dr. M. Eren<br>
Surface elevation 1,142m · Total depth 6.4m<br>
Catalogued artifacts: 218 · Hover any layer to inspect.
</div>
</header>
<div class="tl1-dig">
<div class="tl1-ruler">
<div class="tl1-tick">0.0m</div>
<div class="tl1-tick">1.0m</div>
<div class="tl1-tick">2.5m</div>
<div class="tl1-tick">3.8m</div>
<div class="tl1-tick">5.0m</div>
<div class="tl1-tick">6.4m</div>
</div>
<div class="tl1-stack">
<div class="tl1-layer tl1-l1">
<div class="tl1-era">Topsoil & Ottoman</div>
<div class="tl1-years">CE 1453 – present · 0.0–1.0m</div>
<div class="tl1-find">Plowed agricultural soil mixed with glazed Iznik shards, a worn copper para from the reign of Selim II, and clay pipe fragments. Heavy modern disturbance; treat all surface finds as out of context.</div>
</div>
<div class="tl1-layer tl1-l2">
<div class="tl1-era">Byzantine Habitation</div>
<div class="tl1-years">CE 330 – 1200 · 1.0–2.5m</div>
<div class="tl1-find">Compacted clay floors of a small basilica, three intact storage amphorae, a hoard of 47 bronze folles, and bone styluses. Evidence of fire damage in the eastern quadrant suggests abandonment by the late 12th century.</div>
</div>
<div class="tl1-layer tl1-l3">
<div class="tl1-era">Roman Provincial</div>
<div class="tl1-years">63 BCE – CE 330 · 2.5–3.8m</div>
<div class="tl1-find">Hypocaust tile system, fragment of a tessellated mosaic depicting a stag, two terra sigillata bowls stamped with the maker's mark CAESIVS. Coin of Hadrian recovered at 3.2m.</div>
</div>
<div class="tl1-layer tl1-l4">
<div class="tl1-era">Hellenistic</div>
<div class="tl1-years">323 – 63 BCE · 3.8–4.6m</div>
<div class="tl1-find">Lower courses of an ashlar wall (probable agora boundary). Fine black-glaze pottery from Pergamon, three iron arrowheads, and a sealed cache of 12 silver tetradrachms of Eumenes II.</div>
</div>
<div class="tl1-layer tl1-l5">
<div class="tl1-era">Late Bronze</div>
<div class="tl1-years">1600 – 1200 BCE · 4.6–5.6m</div>
<div class="tl1-find">Hittite-period storage pithoi in situ, cuneiform tablet fragment (administrative, grain inventory), bronze fibula. Burn layer at 5.4m correlates with the regional collapse horizon documented at Boğazköy.</div>
</div>
<div class="tl1-layer tl1-l6">
<div class="tl1-era">Neolithic</div>
<div class="tl1-years">7000 – 5000 BCE · 5.6–6.4m</div>
<div class="tl1-find">Mudbrick platform, obsidian blades sourced to Göllü Dağ, animal bone assemblage (caprines dominant), and the partial remains of a clay figurine — seated female, headless. Sterile soil at 6.4m.</div>
</div>
</div>
<aside class="tl1-artifacts">
<h4 class="tl1-art-title">Featured Finds · Season 04</h4>
<div class="tl1-card">
<div class="tl1-card-name">Tetradrachm of Eumenes II</div>
<div class="tl1-card-id">CAT. K7-H-0042 · Layer 4</div>
<div class="tl1-card-desc">Silver, 17.1g. Obverse: diademed head of Philetairos. Reverse: seated Athena with shield. Mint of Pergamon, c. 180 BCE.</div>
</div>
<div class="tl1-card">
<div class="tl1-card-name">Cuneiform Inventory Tablet</div>
<div class="tl1-card-id">CAT. K7-B-0117 · Layer 5</div>
<div class="tl1-card-desc">Unfired clay, fragmentary. Ten lines of Hittite syllabic script recording wheat (ZÍZ) quantities. Awaiting full transliteration by Eren & Tunç.</div>
</div>
<div class="tl1-card">
<div class="tl1-card-name">Mosaic Stag Fragment</div>
<div class="tl1-card-id">CAT. K7-R-0008 · Layer 3</div>
<div class="tl1-card-desc">Tesserae in limestone and smalti, 38×42cm. Likely from the threshold of a peristyle court. Provincial workshop, late 2nd c. CE.</div>
</div>
<div class="tl1-card">
<div class="tl1-card-name">Obsidian Blade Cache</div>
<div class="tl1-card-id">CAT. K7-N-0156 · Layer 6</div>
<div class="tl1-card-desc">Six pressure-flaked prismatic blades. XRF analysis confirms Göllü Dağ source, ~270km southeast. Trade evidence for early Neolithic exchange networks.</div>
</div>
</aside>
</div>
</section> .tl1-wrap {
background: #1a1410;
color: #e8dfc8;
font-family: 'IBM Plex Mono', ui-monospace, monospace;
padding: 2.5rem 2rem 3rem;
}
.tl1-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
margin-bottom: 2rem;
}
.tl1-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
font-size: clamp(1.75rem, 4vw, 3rem);
line-height: 0.95;
color: #f0e5cc;
margin: 0;
}
.tl1-title em { font-style: italic; color: #c89860; }
.tl1-meta {
font-size: 11px;
line-height: 1.7;
color: #a89570;
border-left: 1px solid #5a4830;
padding-left: 1rem;
align-self: end;
}
.tl1-meta strong { color: #e8dfc8; display: block; margin-bottom: 0.25rem; }
.tl1-dig {
display: grid;
grid-template-columns: 60px 1fr 260px;
gap: 0;
}
.tl1-ruler {
display: flex;
flex-direction: column;
font-size: 10px;
color: #8a7550;
border-right: 1px solid #5a4830;
}
.tl1-tick {
flex: 1;
padding: 0.5rem 0.5rem 0 0;
text-align: right;
border-top: 1px dashed rgba(138,117,80,0.3);
letter-spacing: 0.1em;
}
.tl1-stack { display: flex; flex-direction: column; }
.tl1-layer {
flex: 1;
min-height: 110px;
padding: 1.25rem 1.5rem;
position: relative;
border-bottom: 2px solid rgba(0,0,0,0.4);
cursor: pointer;
transition: flex 0.6s cubic-bezier(0.7, 0, 0.2, 1);
overflow: hidden;
}
.tl1-layer::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.6;
mix-blend-mode: overlay;
pointer-events: none;
}
.tl1-l1 { background: linear-gradient(180deg, #6b5840, #574332); }
.tl1-l1::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 9px); }
.tl1-l2 { background: linear-gradient(180deg, #8a6840, #6e5232); }
.tl1-l2::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0 3px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2) 0 4px, transparent 4px); background-size: 40px 40px, 60px 60px; }
.tl1-l3 { background: linear-gradient(180deg, #a47a48, #80582e); }
.tl1-l3::before { background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.08) 20px 22px); }
.tl1-l4 { background: linear-gradient(180deg, #c08850, #9a6638); }
.tl1-l4::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,200,120,0.2), transparent 70%); }
.tl1-l5 { background: linear-gradient(180deg, #7a5a3a, #4e3820); }
.tl1-l5::before { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.tl1-l6 { background: linear-gradient(180deg, #3a2818, #1a1008); }
.tl1-layer:hover { flex: 3; }
.tl1-layer:hover .tl1-find { opacity: 1; transform: translateX(0); }
.tl1-era {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.1rem;
color: #f5ecd1;
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.tl1-years {
font-size: 10px;
color: rgba(245,236,209,0.7);
letter-spacing: 0.15em;
margin-top: 0.25rem;
}
.tl1-find {
margin-top: 0.75rem;
font-size: 11px;
line-height: 1.6;
color: rgba(245,236,209,0.85);
max-width: 500px;
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.tl1-artifacts {
border-left: 1px solid #5a4830;
padding: 0 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.tl1-art-title {
font-size: 10px;
letter-spacing: 0.3em;
color: #8a7550;
text-transform: uppercase;
padding-bottom: 0.5rem;
border-bottom: 1px solid #5a4830;
margin: 0 0 0.5rem;
}
.tl1-card {
padding: 0.5rem 0;
border-bottom: 1px dashed rgba(138,117,80,0.3);
}
.tl1-card-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1rem;
font-style: italic;
color: #c89860;
}
.tl1-card-id {
font-size: 9px;
color: #8a7550;
letter-spacing: 0.15em;
margin: 0.25rem 0;
}
.tl1-card-desc {
font-size: 10.5px;
line-height: 1.5;
color: #a89570;
}
@media (max-width: 720px) {
.tl1-head { grid-template-columns: 1fr; gap: 1.25rem; }
.tl1-dig { grid-template-columns: 50px 1fr; }
.tl1-artifacts { grid-column: 1 / -1; border-left: none; border-top: 1px solid #5a4830; padding: 1rem 0 0; margin-top: 1rem; }
}