HTML
<div class="exif-stage">
<div class="exif-grid">
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(160deg,#c86020 0%,#e8a030 40%,#f0c060 70%,#a04010 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Sony A7 IV</div><div class="exif-lens">FE 24-70mm f/2.8 GM</div></div><div class="exif-date">Mar 14, 2024</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/8.0</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/250s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">100</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>35mm</strong></span><span>WB: <strong>Daylight</strong></span><span>Malibu, CA</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(145deg,#1a1218 0%,#2c1828 50%,#180c14 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Nikon Z6 III</div><div class="exif-lens">NIKKOR Z 85mm f/1.8 S</div></div><div class="exif-date">Jan 8, 2024</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/1.8</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/160s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">800</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>85mm</strong></span><span>WB: <strong>Tungsten</strong></span><span>Flash: <strong>Off</strong></span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(180deg,#082840 0%,#0c4060 35%,#1060a0 70%,#082040 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Fujifilm X-T5</div><div class="exif-lens">XF 16-80mm f/4 R</div></div><div class="exif-date">Feb 22, 2024</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/11</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/500s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">200</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>16mm</strong></span><span>WB: <strong>Cloudy</strong></span><span>Big Sur, CA</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(135deg,#0c1e10 0%,#1a3818 40%,#2a5a28 70%,#0c2010 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Canon EOS R5</div><div class="exif-lens">RF 24-105mm f/4L IS</div></div><div class="exif-date">Apr 5, 2024</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/5.6</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/60s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">400</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Shade</strong></span><span>Olympic NP</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(160deg,#080c18 0%,#101428 40%,#181c30 70%,#0c0e20 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Sony A7 IV</div><div class="exif-lens">FE 50mm f/1.4 GM</div></div><div class="exif-date">Dec 18, 2023</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/2.0</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/30s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">3200</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Auto</strong></span><span>Tokyo, JP</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(155deg,#604020 0%,#d09050 40%,#f0c880 70%,#806030 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Hasselblad X2D</div><div class="exif-lens">XCD 45mm f/3.5</div></div><div class="exif-date">Nov 3, 2023</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/16</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/1000s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">64</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>45mm</strong></span><span>WB: <strong>Daylight</strong></span><span>Sahara, Morocco</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(170deg,#c8c8cc 0%,#a8a8b0 40%,#d0d0d4 70%,#b0b0b8 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Leica M11</div><div class="exif-lens">Summicron 50mm f/2</div></div><div class="exif-date">Oct 14, 2023</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/4.0</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">1/125s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">200</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>50mm</strong></span><span>WB: <strong>Cloudy</strong></span><span>Highlands, UK</span></div>
</div>
</div>
<div class="exif-cell">
<div class="exif-img" style="background:linear-gradient(150deg,#200830 0%,#401060 40%,#602080 65%,#100420 100%)"></div>
<div class="exif-tip">
<div class="exif-tip-head"><div><div class="exif-camera">Nikon Z6 III</div><div class="exif-lens">NIKKOR Z 14-30mm f/4 S</div></div><div class="exif-date">Sep 27, 2023</div></div>
<div class="exif-settings">
<div class="exif-set"><div class="exif-key">Aperture</div><div class="exif-val">f/2.8</div></div>
<div class="exif-set"><div class="exif-key">Shutter</div><div class="exif-val">20s</div></div>
<div class="exif-set"><div class="exif-key">ISO</div><div class="exif-val">1600</div></div>
</div>
<div class="exif-extra"><span>Focal: <strong>14mm</strong></span><span>WB: <strong>3200K</strong></span><span>Iceland</span></div>
</div>
</div>
</div>
</div> CSS
.exif-stage {
background: #080808;
/* Top room — EXIF cards pop UP from each photo, ~180px tall. */
padding: 220px 28px 40px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
/* Force full width of the .cf-stage flex parent. Without this, the
stage collapses to its content's min-width and the 4-column grid
inside resolves each 1fr track to ~0px, stacking all 8 photos as
one thin vertical strip. */
width: 100%;
box-sizing: border-box;
}
.exif-grid {
max-width: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.exif-cell {
position: relative;
aspect-ratio: 3 / 2;
cursor: help;
}
.exif-img {
width: 100%;
height: 100%;
display: block;
transition: filter .2s;
}
.exif-cell:hover .exif-img {
filter: brightness(1.1);
}
.exif-tip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
z-index: 100;
width: 230px;
background: #111;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.98);
overflow: hidden;
text-align: left;
}
.exif-cell:hover .exif-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.exif-tip-head {
padding: 11px 13px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.exif-camera {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.7);
}
.exif-lens {
font-size: 8.5px;
color: rgba(255, 255, 255, 0.2);
margin-top: 2px;
}
.exif-date {
font-size: 8.5px;
color: rgba(255, 255, 255, 0.2);
}
.exif-settings {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.exif-set {
padding: 9px 13px;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.exif-set:last-child {
border-right: none;
}
.exif-key {
font-size: 6.5px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 2px;
}
.exif-val {
font-size: 10.5px;
color: rgba(255, 255, 255, 0.65);
}
.exif-extra {
display: flex;
justify-content: space-between;
padding: 8px 13px;
font-size: 8.5px;
color: rgba(255, 255, 255, 0.25);
gap: 6px;
}
.exif-extra strong {
color: rgba(255, 255, 255, 0.45);
font-weight: 500;
}