Photo EXIF Grid
A dark contact-sheet grid of eight gradient photographs. Hover any cell to lift a developer-tools-style card with full EXIF metadata — camera body, lens, aperture, shutter, ISO, focal length, white balance, and location. For photo portfolios and stock catalogs.
Photo EXIF Grid the 17th of 21 designs in the 21 CSS Tooltips 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
<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> .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;
}