<div><span class="lbl">Bottom scrim under the copy</span>
<section class="ib ib-sky" aria-labelledby="ib-sky-title">
<img class="ib-photo" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim" aria-hidden="true"></div>
<nav class="ib-nav" aria-label="Arden Skies">
<a class="ib-logo" href="#">Arden Skies</a>
<ul class="ib-links"><li><a href="#">Tours</a></li><li><a href="#">Gift vouchers</a></li><li><a href="#">Book</a></li></ul>
</nav>
<div class="ib-content">
<p class="ib-kicker">Gold-tier dark sky reserve</p>
<h1 class="ib-title" id="ib-sky-title">See the Milky Way with your own eyes</h1>
<p class="ib-sub">Two-hour guided tours from a heated observatory, with a 16-inch telescope and an astronomer who knows every constellation by name.</p>
<div class="ib-ctas"><a class="ib-btn ib-btn-solid" href="#">Book a tour</a><a class="ib-btn ib-btn-line" href="#">Tonight's sky forecast</a></div>
<ul class="ib-facts">
<li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Nightly at 21:00 and 23:30</li>
<li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 12l5 5L20 6"/></svg>Free rebooking if it clouds over</li>
<li>From £38 per adult</li>
</ul>
</div>
</section></div>
<div><span class="lbl">Side scrim with a stats row</span>
<section class="ib ib-house" aria-labelledby="ib-house-title">
<img class="ib-photo" src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim" aria-hidden="true"></div>
<nav class="ib-nav" aria-label="Halden Architects">
<a class="ib-logo" href="#">Halden Architects</a>
<ul class="ib-links"><li><a href="#">Projects</a></li><li><a href="#">Studio</a></li><li><a href="#">Contact</a></li></ul>
</nav>
<div class="ib-content">
<p class="ib-kicker">Residential architecture</p>
<h2 class="ib-title" id="ib-house-title">Homes shaped by light, built for a century</h2>
<p class="ib-sub">We design low-energy houses around how a family actually lives, then stay on site until the last window is in.</p>
<div class="ib-ctas"><a class="ib-btn ib-btn-solid" href="#">View our projects</a><a class="ib-btn ib-btn-line" href="#">Start a conversation</a></div>
<dl class="ib-stats">
<div><dt>142</dt><dd>homes completed</dd></div>
<div><dt>27 yrs</dt><dd>in practice</dd></div>
<div><dt>11</dt><dd>design awards</dd></div>
</dl>
</div>
</section></div>
<div><span class="lbl">Solid panel over the photo</span>
<section class="ib ib-dine" aria-labelledby="ib-dine-title">
<img class="ib-photo" src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim" aria-hidden="true"></div>
<div class="ib-panel">
<p class="ib-kicker">Osteria Lume · Harbourside</p>
<h2 class="ib-title" id="ib-dine-title">Handmade pasta, a wood fire and a long table</h2>
<p class="ib-sub">Our pasta is rolled every afternoon and the menu follows what the boats and the farm bring in. Walk-ins welcome at the bar.</p>
<div class="ib-ctas"><a class="ib-btn ib-btn-solid" href="#">Reserve a table</a><a class="ib-btn ib-btn-line" href="#">See the menu</a></div>
<dl class="ib-hours">
<dt>Tue to Thu</dt><dd>17:00 to 22:30</dd>
<dt>Fri and Sat</dt><dd>12:00 to 23:00</dd>
<dt>Sun</dt><dd>12:00 to 17:00</dd>
</dl>
</div>
</section></div>
CSS
/* Photo background heroes. The photo is an <img> with object-fit: cover behind the content, and a gradient scrim
(.ib-scrim) sits between them so every line of text keeps at least 4.5:1 contrast wherever it lands on the photo.
On narrow screens, where text can fall on any part of the image, the scrim becomes darker and more even. */
.ib{--ib-radius:28px;--ib-text:#fff;--ib-soft:#e5e7eb;
position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:600px;overflow:hidden;border-radius:var(--ib-radius);
color:var(--ib-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.ib :where(h1,h2,p,ul,dl,dd){margin:0;padding:0}
.ib a{color:inherit;text-decoration:none}
.ib a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px #0f172a}
.ib-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.ib-scrim{position:absolute;inset:0;z-index:-1}
.ib-nav{display:flex;align-items:center;gap:28px;padding:24px 36px}
.ib-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.ib-links{display:flex;gap:24px;margin-left:auto;list-style:none;font-size:.94rem;font-weight:600}
.ib-content{margin-top:auto;padding:0 36px 44px;max-width:720px}
.ib-kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ib-soft)}
.ib-title{margin-top:14px;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.ib-sub{margin-top:18px;max-width:560px;font-size:1.1rem;color:var(--ib-soft)}
.ib-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ib-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font-weight:700;
border:2px solid #fff;transition:background-color .2s,color .2s}
.ib-btn-solid{background:#fff;color:#0f172a}
.ib .ib-btn-solid{color:#0f172a}
.ib-btn-solid:hover{background:#e2e8f0;border-color:#e2e8f0}
.ib-btn-line:hover{background:#fff;color:#0f172a}
.ib-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;list-style:none;font-size:.92rem;color:var(--ib-soft)}
.ib-facts li{display:flex;align-items:center;gap:8px}
.ib-facts svg{flex:none}
/* 1. bottom scrim */
.ib-sky .ib-scrim{background:radial-gradient(70% 70% at 22% 72%,rgba(2,6,23,.7),rgba(2,6,23,0) 75%),linear-gradient(180deg,rgba(2,6,23,.62) 0%,rgba(2,6,23,.2) 18%,rgba(2,6,23,.55) 38%,rgba(2,6,23,.9) 70%,rgba(2,6,23,.95) 100%)}
.ib-sky .ib-photo{object-position:50% 30%}
/* 2. side scrim */
.ib-house{--ib-soft:#e7e5e4}
.ib-house .ib-scrim{background:linear-gradient(90deg,rgba(12,10,9,.9) 0%,rgba(12,10,9,.8) 38%,rgba(12,10,9,.25) 70%,rgba(12,10,9,0) 100%),linear-gradient(180deg,rgba(12,10,9,.55),rgba(12,10,9,0) 24%)}
.ib-house .ib-content{margin:auto 0;padding-bottom:36px}
.ib-house .ib-photo{object-position:70% 50%}
.ib-stats{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);max-width:520px}
.ib-stats dt{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.ib-stats dd{font-size:.86rem;color:var(--ib-soft)}
.ib-stats div{display:flex;flex-direction:column}
/* 3. solid panel over the photo */
.ib-dine{--ib-text:#1c1917;--ib-soft:#57534e;justify-content:center;align-items:flex-end;padding:40px}
.ib-dine .ib-photo{object-position:20% 50%}
.ib-dine .ib-scrim{background:linear-gradient(90deg,rgba(28,25,23,0) 40%,rgba(28,25,23,.35))}
.ib-panel{max-width:470px;padding:40px;border-radius:22px;background:rgba(255,251,245,.97);box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.ib-dine .ib-kicker{color:#9a3412}
.ib-dine .ib-title{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(2rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.01em;font-weight:700}
.ib-dine .ib-sub{font-size:1rem}
.ib-dine a:focus-visible{outline-color:#9a3412;box-shadow:none}
.ib-dine .ib-btn{border-color:#9a3412}
.ib-dine .ib-btn-solid{background:#9a3412;color:#fff}
.ib-dine .ib-btn-solid:hover{background:#7c2d12;border-color:#7c2d12}
.ib-dine .ib-btn-line{color:#9a3412}
.ib-dine .ib-btn-line:hover{background:#9a3412;color:#fff}
.ib-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:24px;padding-top:20px;border-top:1px solid #e7ddd0;font-size:.92rem}
.ib-hours dt{font-weight:700}
.ib-hours dd{color:var(--ib-soft)}
@media (max-width:767px){
.ib{min-height:560px}
.ib-nav{padding:20px 22px}
.ib-links li:not(:last-child){display:none}
.ib-content{padding:0 22px 32px}
.ib-btn{flex:1 1 100%}
.ib-sky .ib-scrim{background:linear-gradient(180deg,rgba(2,6,23,.7) 0%,rgba(2,6,23,.72) 30%,rgba(2,6,23,.9) 62%,rgba(2,6,23,.95) 100%)}
.ib-house .ib-scrim{background:rgba(12,10,9,.74)}
.ib-dine{padding:200px 14px 14px;align-items:stretch;background:#1c1917}
.ib-dine .ib-photo{height:260px;object-position:30% 50%}
.ib-panel{padding:28px 22px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.ib *{transition:none!important}}
Bootstrap 5 code
Requires: Bootstrap 5.3.8 CSS
HTML
<div><span class="lbl">Bottom scrim under the copy</span>
<section class="ib ib-sky position-relative d-flex flex-column" aria-labelledby="ib-sky-title">
<img class="ib-photo position-absolute top-0 start-0 w-100 h-100 object-fit-cover" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim position-absolute top-0 start-0 w-100 h-100" aria-hidden="true"></div>
<nav class="ib-nav d-flex align-items-center" aria-label="Arden Skies">
<a class="ib-logo" href="#">Arden Skies</a>
<ul class="nav ib-links ms-auto"><li class="nav-item d-none d-md-block"><a class="nav-link" href="#">Tours</a></li><li class="nav-item d-none d-md-block"><a class="nav-link" href="#">Gift vouchers</a></li><li class="nav-item"><a class="nav-link" href="#">Book</a></li></ul>
</nav>
<div class="ib-content mt-auto">
<p class="ib-kicker">Gold-tier dark sky reserve</p>
<h1 class="ib-title" id="ib-sky-title">See the Milky Way with your own eyes</h1>
<p class="ib-sub">Two-hour guided tours from a heated observatory, with a 16-inch telescope and an astronomer who knows every constellation by name.</p>
<div class="ib-ctas d-flex flex-wrap"><a class="btn ib-btn ib-btn-solid" href="#">Book a tour</a><a class="btn ib-btn ib-btn-line" href="#">Tonight's sky forecast</a></div>
<ul class="ib-facts list-unstyled d-flex flex-wrap">
<li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Nightly at 21:00 and 23:30</li>
<li><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 12l5 5L20 6"/></svg>Free rebooking if it clouds over</li>
<li>From £38 per adult</li>
</ul>
</div>
</section></div>
<div><span class="lbl">Side scrim with a stats row</span>
<section class="ib ib-house position-relative d-flex flex-column" aria-labelledby="ib-house-title">
<img class="ib-photo position-absolute top-0 start-0 w-100 h-100 object-fit-cover" src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim position-absolute top-0 start-0 w-100 h-100" aria-hidden="true"></div>
<nav class="ib-nav d-flex align-items-center" aria-label="Halden Architects">
<a class="ib-logo" href="#">Halden Architects</a>
<ul class="nav ib-links ms-auto"><li class="nav-item d-none d-md-block"><a class="nav-link" href="#">Projects</a></li><li class="nav-item d-none d-md-block"><a class="nav-link" href="#">Studio</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul>
</nav>
<div class="ib-content">
<p class="ib-kicker">Residential architecture</p>
<h2 class="ib-title" id="ib-house-title">Homes shaped by light, built for a century</h2>
<p class="ib-sub">We design low-energy houses around how a family actually lives, then stay on site until the last window is in.</p>
<div class="ib-ctas d-flex flex-wrap"><a class="btn ib-btn ib-btn-solid" href="#">View our projects</a><a class="btn ib-btn ib-btn-line" href="#">Start a conversation</a></div>
<dl class="ib-stats d-flex flex-wrap">
<div><dt>142</dt><dd>homes completed</dd></div>
<div><dt>27 yrs</dt><dd>in practice</dd></div>
<div><dt>11</dt><dd>design awards</dd></div>
</dl>
</div>
</section></div>
<div><span class="lbl">Solid panel over the photo</span>
<section class="ib ib-dine position-relative d-flex flex-column justify-content-center align-items-md-end" aria-labelledby="ib-dine-title">
<img class="ib-photo position-absolute top-0 start-0 w-100 h-100 object-fit-cover" src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="ib-scrim position-absolute top-0 start-0 w-100 h-100" aria-hidden="true"></div>
<div class="ib-panel">
<p class="ib-kicker">Osteria Lume · Harbourside</p>
<h2 class="ib-title" id="ib-dine-title">Handmade pasta, a wood fire and a long table</h2>
<p class="ib-sub">Our pasta is rolled every afternoon and the menu follows what the boats and the farm bring in. Walk-ins welcome at the bar.</p>
<div class="ib-ctas d-flex flex-wrap"><a class="btn ib-btn ib-btn-solid" href="#">Reserve a table</a><a class="btn ib-btn ib-btn-line" href="#">See the menu</a></div>
<dl class="ib-hours">
<dt>Tue to Thu</dt><dd>17:00 to 22:30</dd>
<dt>Fri and Sat</dt><dd>12:00 to 23:00</dd>
<dt>Sun</dt><dd>12:00 to 17:00</dd>
</dl>
</div>
</section></div>
CSS
/* Photo background heroes in Bootstrap 5: the photo is an <img> with .object-fit-cover and Bootstrap position utilities,
a gradient scrim keeps every line of text at 4.5:1 or more, and the actions are .btn restyled through CSS variables. */
.ib{--ib-radius:28px;--ib-text:#fff;--ib-soft:#e5e7eb;isolation:isolate;min-height:600px;overflow:hidden;border-radius:var(--ib-radius);color:var(--ib-text)}
.ib a{color:inherit;text-decoration:none}
.ib a:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px #0f172a}
.ib-photo{z-index:-2}
.ib-scrim{z-index:-1}
.ib-nav{gap:28px;padding:24px 36px}
.ib-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
.ib-links{--bs-nav-link-padding-x:12px;--bs-nav-link-padding-y:2px;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.94rem;--bs-nav-link-color:#fff;--bs-nav-link-hover-color:#fff;margin-right:-12px}
.ib-content{padding:0 36px 44px;max-width:720px}
.ib-kicker{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ib-soft)}
.ib-title{margin:14px 0 0;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:800}
.ib-sub{margin:18px 0 0;max-width:560px;font-size:1.1rem;color:var(--ib-soft)}
.ib-ctas{gap:12px;margin-top:30px}
.ib-btn{--bs-btn-padding-x:24px;--bs-btn-font-weight:700;--bs-btn-border-radius:999px;--bs-btn-border-width:2px;--bs-btn-border-color:#fff;--bs-btn-hover-border-color:#fff;
--bs-btn-active-border-color:#fff;display:inline-flex;align-items:center;justify-content:center;min-height:50px;transition:background-color .2s,color .2s}
.ib-btn-solid{--bs-btn-color:#0f172a;--bs-btn-bg:#fff;--bs-btn-hover-color:#0f172a;--bs-btn-hover-bg:#e2e8f0;--bs-btn-hover-border-color:#e2e8f0;--bs-btn-active-color:#0f172a;--bs-btn-active-bg:#e2e8f0}
.ib-btn-line{--bs-btn-color:#fff;--bs-btn-bg:transparent;--bs-btn-hover-color:#0f172a;--bs-btn-hover-bg:#fff;--bs-btn-active-color:#0f172a;--bs-btn-active-bg:#fff}
.ib .ib-btn{color:var(--bs-btn-color)}
.ib .ib-btn:hover{color:var(--bs-btn-hover-color)}
.ib-facts{gap:8px 24px;margin:26px 0 0;font-size:.92rem;color:var(--ib-soft)}
.ib-facts li{display:flex;align-items:center;gap:8px}
.ib-sky .ib-scrim{background:radial-gradient(70% 70% at 22% 72%,rgba(2,6,23,.7),rgba(2,6,23,0) 75%),linear-gradient(180deg,rgba(2,6,23,.62) 0%,rgba(2,6,23,.2) 18%,rgba(2,6,23,.55) 38%,rgba(2,6,23,.9) 70%,rgba(2,6,23,.95) 100%)}
.ib-sky .ib-photo{object-position:50% 30%}
.ib-house{--ib-soft:#e7e5e4}
.ib-house .ib-scrim{background:linear-gradient(90deg,rgba(12,10,9,.9) 0%,rgba(12,10,9,.8) 38%,rgba(12,10,9,.25) 70%,rgba(12,10,9,0) 100%),linear-gradient(180deg,rgba(12,10,9,.55),rgba(12,10,9,0) 24%)}
.ib-house .ib-content{margin:auto 0;padding-bottom:36px}
.ib-house .ib-photo{object-position:70% 50%}
.ib-stats{gap:20px 40px;margin:40px 0 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);max-width:520px}
.ib-stats dt{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.5}
.ib-stats dd{margin:0;font-size:.86rem;color:var(--ib-soft)}
.ib-dine{--ib-text:#1c1917;--ib-soft:#57534e;padding:40px}
.ib-dine .ib-photo{object-position:20% 50%}
.ib-dine .ib-scrim{background:linear-gradient(90deg,rgba(28,25,23,0) 40%,rgba(28,25,23,.35))}
.ib-panel{max-width:470px;padding:40px;border-radius:22px;background:rgba(255,251,245,.97);box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.ib-dine .ib-kicker{color:#9a3412}
.ib-dine .ib-title{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:clamp(2rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.01em;font-weight:700}
.ib-dine .ib-sub{font-size:1rem}
.ib-dine a:focus-visible{outline-color:#9a3412;box-shadow:none}
.ib-dine .ib-btn{--bs-btn-border-color:#9a3412;--bs-btn-hover-border-color:#7c2d12;--bs-btn-active-border-color:#7c2d12}
.ib-dine .ib-btn-solid{--bs-btn-color:#fff;--bs-btn-bg:#9a3412;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#7c2d12;--bs-btn-active-color:#fff;--bs-btn-active-bg:#7c2d12}
.ib-dine .ib-btn-line{--bs-btn-color:#9a3412;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#9a3412;--bs-btn-hover-border-color:#9a3412;--bs-btn-active-color:#fff;--bs-btn-active-bg:#9a3412}
.ib-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:24px 0 0;padding-top:20px;border-top:1px solid #e7ddd0;font-size:.92rem}
.ib-hours dt{font-weight:700}
.ib-hours dd{margin:0;color:var(--ib-soft)}
@media (max-width:767.98px){
.ib{min-height:560px}
.ib-nav{padding:20px 22px}
.ib-content{padding:0 22px 32px}
.ib-btn{flex:1 1 100%}
.ib-sky .ib-scrim{background:linear-gradient(180deg,rgba(2,6,23,.7) 0%,rgba(2,6,23,.72) 30%,rgba(2,6,23,.9) 62%,rgba(2,6,23,.95) 100%)}
.ib-house .ib-scrim{background:rgba(12,10,9,.74)}
.ib-dine{padding:200px 14px 14px;background:#1c1917}
.ib-dine .ib-photo{height:260px!important;object-position:30% 50%}
.ib-panel{padding:28px 22px;max-width:none}
}
@media (prefers-reduced-motion:reduce){.ib *{transition:none!important}}
Tailwind 4 code
Requires: Tailwind CSS 4
HTML
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Bottom scrim under the copy</span>
<section class="relative isolate flex min-h-[600px] flex-col overflow-hidden rounded-[28px] leading-normal text-white max-md:min-h-[560px]" aria-labelledby="ib-sky-title">
<img class="absolute inset-0 -z-20 size-full object-cover object-[50%_30%]" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="absolute inset-0 -z-10 bg-[linear-gradient(180deg,rgba(2,6,23,.7)_0%,rgba(2,6,23,.72)_30%,rgba(2,6,23,.9)_62%,rgba(2,6,23,.95)_100%)] md:bg-[radial-gradient(70%_70%_at_22%_72%,rgba(2,6,23,.7),rgba(2,6,23,0)_75%),linear-gradient(180deg,rgba(2,6,23,.62)_0%,rgba(2,6,23,.2)_18%,rgba(2,6,23,.55)_38%,rgba(2,6,23,.9)_70%,rgba(2,6,23,.95)_100%)]" aria-hidden="true"></div>
<nav class="flex items-center gap-7 px-[22px] py-5 md:px-9 md:py-6" aria-label="Arden Skies">
<a class="rounded-lg text-[1.1rem] font-extrabold tracking-[-.01em] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Arden Skies</a>
<ul class="ml-auto flex gap-6 text-[.94rem] font-semibold"><li class="max-md:hidden"><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Tours</a></li><li class="max-md:hidden"><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Gift vouchers</a></li><li><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Book</a></li></ul>
</nav>
<div class="mt-auto max-w-[720px] px-[22px] pb-8 md:px-9 md:pb-11">
<p class="text-[.8rem] font-bold tracking-[.14em] text-[#e5e7eb] uppercase">Gold-tier dark sky reserve</p>
<h1 class="mt-3.5 text-[clamp(2.3rem,5.6vw,4.4rem)] leading-[1.02] font-extrabold tracking-[-.035em]" id="ib-sky-title">See the Milky Way with your own eyes</h1>
<p class="mt-[18px] max-w-[560px] text-[1.1rem] text-[#e5e7eb]">Two-hour guided tours from a heated observatory, with a 16-inch telescope and an astronomer who knows every constellation by name.</p>
<div class="mt-[30px] flex flex-wrap gap-3"><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-white bg-white px-6 font-bold text-[#0f172a] transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#e2e8f0] hover:bg-[#e2e8f0] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Book a tour</a><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-white px-6 font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:bg-white hover:text-[#0f172a] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Tonight's sky forecast</a></div>
<ul class="mt-[26px] flex flex-wrap gap-x-6 gap-y-2 text-[.92rem] text-[#e5e7eb]">
<li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Nightly at 21:00 and 23:30</li>
<li class="flex items-center gap-2"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 12l5 5L20 6"/></svg>Free rebooking if it clouds over</li>
<li>From £38 per adult</li>
</ul>
</div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Side scrim with a stats row</span>
<section class="relative isolate flex min-h-[600px] flex-col overflow-hidden rounded-[28px] leading-normal text-white max-md:min-h-[560px]" aria-labelledby="ib-house-title">
<img class="absolute inset-0 -z-20 size-full object-cover object-[70%_50%]" src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="absolute inset-0 -z-10 bg-[linear-gradient(rgba(12,10,9,.74),rgba(12,10,9,.74))] md:bg-[linear-gradient(90deg,rgba(12,10,9,.9)_0%,rgba(12,10,9,.8)_38%,rgba(12,10,9,.25)_70%,rgba(12,10,9,0)_100%),linear-gradient(180deg,rgba(12,10,9,.55),rgba(12,10,9,0)_24%)]" aria-hidden="true"></div>
<nav class="flex items-center gap-7 px-[22px] py-5 md:px-9 md:py-6" aria-label="Halden Architects">
<a class="rounded-lg text-[1.1rem] font-extrabold tracking-[-.01em] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Halden Architects</a>
<ul class="ml-auto flex gap-6 text-[.94rem] font-semibold"><li class="max-md:hidden"><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Projects</a></li><li class="max-md:hidden"><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Studio</a></li><li><a class="rounded-lg focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white" href="#">Contact</a></li></ul>
</nav>
<div class="my-auto max-w-[720px] px-[22px] pb-8 md:px-9 md:pb-9">
<p class="text-[.8rem] font-bold tracking-[.14em] text-[#e7e5e4] uppercase">Residential architecture</p>
<h2 class="mt-3.5 text-[clamp(2.3rem,5.6vw,4.4rem)] leading-[1.02] font-extrabold tracking-[-.035em]" id="ib-house-title">Homes shaped by light, built for a century</h2>
<p class="mt-[18px] max-w-[560px] text-[1.1rem] text-[#e7e5e4]">We design low-energy houses around how a family actually lives, then stay on site until the last window is in.</p>
<div class="mt-[30px] flex flex-wrap gap-3"><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-white bg-white px-6 font-bold text-[#0f172a] transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#e2e8f0] hover:bg-[#e2e8f0] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">View our projects</a><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-white px-6 font-bold transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:bg-white hover:text-[#0f172a] focus-visible:shadow-[0_0_0_6px_#0f172a] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-white motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Start a conversation</a></div>
<dl class="mt-10 flex max-w-[520px] flex-wrap gap-x-10 gap-y-5 border-t border-white/30 pt-6">
<div class="flex flex-col"><dt class="text-[1.7rem] font-extrabold tracking-[-.02em]">142</dt><dd class="text-[.86rem] text-[#e7e5e4]">homes completed</dd></div>
<div class="flex flex-col"><dt class="text-[1.7rem] font-extrabold tracking-[-.02em]">27 yrs</dt><dd class="text-[.86rem] text-[#e7e5e4]">in practice</dd></div>
<div class="flex flex-col"><dt class="text-[1.7rem] font-extrabold tracking-[-.02em]">11</dt><dd class="text-[.86rem] text-[#e7e5e4]">design awards</dd></div>
</dl>
</div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5567] uppercase">Solid panel over the photo</span>
<section class="relative isolate flex min-h-[560px] flex-col justify-center overflow-hidden rounded-[28px] bg-[#1c1917] px-3.5 pt-[200px] pb-3.5 leading-normal text-[#1c1917] md:min-h-[600px] md:items-end md:bg-transparent md:p-10" aria-labelledby="ib-dine-title">
<img class="absolute inset-x-0 top-0 -z-20 h-[260px] w-full object-cover object-[30%_50%] md:inset-0 md:h-full md:object-[20%_50%]" src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1600&q=80" alt="" width="1600" height="1067">
<div class="absolute inset-0 -z-10 bg-[linear-gradient(90deg,rgba(28,25,23,0)_40%,rgba(28,25,23,.35))]" aria-hidden="true"></div>
<div class="rounded-[22px] bg-[rgba(255,251,245,.97)] px-[22px] py-7 shadow-[0_30px_60px_-20px_rgba(0,0,0,.55)] md:max-w-[470px] md:p-10">
<p class="text-[.8rem] font-bold tracking-[.14em] text-[#9a3412] uppercase">Osteria Lume · Harbourside</p>
<h2 class="mt-3.5 font-['Iowan_Old_Style','Palatino_Linotype',Palatino,Georgia,serif] text-[clamp(2rem,4vw,2.9rem)] leading-[1.08] font-bold tracking-[-.01em]" id="ib-dine-title">Handmade pasta, a wood fire and a long table</h2>
<p class="mt-[18px] text-base text-[#57534e]">Our pasta is rolled every afternoon and the menu follows what the boats and the farm bring in. Walk-ins welcome at the bar.</p>
<div class="mt-[30px] flex flex-wrap gap-3"><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-[#9a3412] bg-[#9a3412] px-6 font-bold text-white transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:border-[#7c2d12] hover:bg-[#7c2d12] focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#9a3412] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">Reserve a table</a><a class="inline-flex min-h-[50px] items-center justify-center rounded-full border-2 border-[#9a3412] px-6 font-bold text-[#9a3412] transition-[color,background-color,border-color,text-decoration-color] duration-200 hover:bg-[#9a3412] hover:text-white focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-[#9a3412] motion-reduce:transition-none max-md:flex-[1_1_100%]" href="#">See the menu</a></div>
<dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-[18px] gap-y-1.5 border-t border-[#e7ddd0] pt-5 text-[.92rem]">
<dt class="font-bold">Tue to Thu</dt><dd class="text-[#57534e]">17:00 to 22:30</dd>
<dt class="font-bold">Fri and Sat</dt><dd class="text-[#57534e]">12:00 to 23:00</dd>
<dt class="font-bold">Sun</dt><dd class="text-[#57534e]">12:00 to 17:00</dd>
</dl>
</div>
</section></div>
About this set
Three heroes with a full-bleed photograph behind the copy, each using a different way to keep the text readable. Bottom scrim puts a night sky tour’s headline, two buttons and three facts at the foot of the photo, over a gradient that darkens towards the bottom and around the copy. Side scrim darkens the left side of an architecture photo for the headline, buttons and a stats row, and leaves the house on the right clear. Solid panel places a restaurant’s headline, buttons and opening hours on an almost opaque cream card over the photo, the safest choice when the image will change. The photo is an img with object-fit: cover rather than a CSS background, so it can have alt text and load like any other image. Contrast was measured by rendering each version at 1200px and 375px with the text hidden and checking every text box against the photo pixels behind it: at least 99 percent of them give 4.5:1 or better and none falls below 3:1. On phones, where the text can land anywhere on the photo, the scrims become darker and more even.
What’s included
Bottom scrim, side scrim and solid panel approaches
Photo as an img with object-fit: cover, not a CSS background
Text contrast measured over the rendered photo at desktop and phone widths
Darker, even scrims on narrow screens
Stats row and opening hours marked up as description lists
Accessibility
Contrast between every line of text and the photo behind it was checked at two widths, with scrims tuned until body text stays above 4.5:1. The photos are decorative and have empty alt text, each nav has an aria-label, and on the scrim heroes focus shows a white outline with a dark halo that stays visible on light and dark parts of the photo; the panel hero uses its accent colour. Button transitions stop under prefers-reduced-motion.
Customise it
Swap the photo URL and adjust the gradient stops on .ib-sky .ib-scrim or .ib-house .ib-scrim: if your photo is brighter, raise the alpha values rather than lightening the text. Change --ib-radius for square corners. In Tailwind the scrims are arbitrary bg-[linear-gradient(...)] values on the scrim div.
