Photo Card Hero — Playground

{CF} CodeFronts Back to CSS Hero Sections Photo Card Hero Pure CSS

Edit any tab — preview updates live

.hs-pc {
  position: relative;
  width: 100%;
  min-height: clamp(220px, 32vh, 100vh);
  display: flex; align-items: flex-end;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  color: #fff;
}
.hs-pc-bg, .hs-pc-grad { position: absolute; inset: 0; }
.hs-pc-bg svg { width: 100%; height: 100%; display: block; }
.hs-pc-grad {
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.hs-pc-c {
  position: relative; z-index: 1;
  padding: clamp(20px, 4vh, 60px);
  max-width: 560px;
  display: flex; flex-direction: column; gap: 8px;
}
.hs-pc-eye {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hs-pc h1 {
  margin: 4px 0; font-size: clamp(22px, 5vw, 56px);
  font-weight: 400; line-height: 1.05; font-style: italic;
  letter-spacing: -0.01em;
}
.hs-pc p {
  margin: 0; font-size: clamp(11px, 1.5vw, 16px);
  font-family: 'Helvetica Neue', sans-serif;
  color: rgba(255,255,255,0.85); max-width: 420px;
}
.hs-pc-cta {
  margin-top: 10px;
  padding: 8px 18px; border-radius: 0;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.7);
  font-family: 'Helvetica Neue', sans-serif; font-size: clamp(10px, 1.3vw, 12px);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; width: fit-content;
  transition: background 0.15s, color 0.15s;
}
.hs-pc-cta:hover { background: #fff; color: #0e0e16; }

<section class="hs-pc">
  <div class="hs-pc-bg" aria-hidden="true">
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="hs-pc-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#ffd479"/>
          <stop offset="60%" stop-color="#ff8a6c"/>
          <stop offset="100%" stop-color="#7c4ab8"/>
        </linearGradient>
      </defs>
      <rect width="400" height="240" fill="url(#hs-pc-sky)"/>
      <circle cx="290" cy="80" r="36" fill="#fff5d4" opacity="0.85"/>
      <path d="M0,180 Q100,150 180,170 T400,160 L400,240 L0,240 Z" fill="#3a2a4f" opacity="0.7"/>
      <path d="M0,200 Q120,180 220,200 T400,190 L400,240 L0,240 Z" fill="#1a1430" opacity="0.85"/>
    </svg>
  </div>
  <div class="hs-pc-grad" aria-hidden="true"></div>
  <div class="hs-pc-c">
    <span class="hs-pc-eye">Spring Collection</span>
    <h1>Light, weighed in seconds.</h1>
    <p>A new range, designed for the unpredictable mornings of May.</p>
    <a class="hs-pc-cta" href="#">Shop the collection</a>
  </div>
</section>

Live preview Ready