Overlay text on a hero image

by ITpresent

HTML

<!-- Overlay text on image (hero) -->
      <article class="card wide">
        <h3>Overlay text on a hero image</h3>
        <div class="preview" style="padding:0;">
          <div style="position:relative; width:100%; height:220px; border-radius:8px; overflow:hidden; background:
            linear-gradient(180deg, rgba(10,10,20,0.10), rgba(10,10,20,0.16)),
            url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1200&q=60') center/cover no-repeat;">
            <div style="position:absolute; left:24px; bottom:20px; color:#fff; text-shadow:0 6px 18px rgba(0,0,0,.45);">
              <div style="font-family:'Lobster',cursive; font-size:1.9rem;">Autumn Workshop</div>
              <div style="font-family:Roboto, sans-serif; font-size:.95rem; opacity:.95">Reserve your seat • Limited availability</div>
            </div>
          </div>
        </div>
        <div class="code" data-code>
&lt;div class="hero" style="position:relative; background:url('image.jpg') center/cover;"&gt;
  &lt;h2 style="font-family:'Lobster',cursive;"&gt;Autumn Workshop&lt;/h2&gt;
&lt;/div&gt;
        </div>
      </article>

















      
      
      
    <br><br>  <a href="https://itpresent.com/css_examples/css_decorative_cursive_fonts.php" 
    target="_blank">CSS Decorative and Cursive Fonts Example</a>