title: Create banner inside a hero image
body: <p>I'm new in CSS and I have a simple CSS grid responsive hero, and I want to add a simple banner at the middle-right with some text with white background and 0.5 opacity</p>
  <p><a href="https://i.stack.imgur.com/qoQic.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qoQic.jpg" alt="enter image description here" /></a></p>
  <p>I created a <a href="https://codepen.io/Gerry123/pen/WNpjNQQ" rel="nofollow noreferrer">CodePen</a> with example</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hero-section {
    display: grid;
    grid-template-columns: 1fr; // stretch to the full frame
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-content: center;
    justify-content: center;
    .banner-image-div {
      grid-area: 1 / 1 / 2 / 2;
    } // image
    .banner-overlay-div {
      grid-area: 1 / 1 / 2 / 2;
    } // gradient or other overlay
    .banner-text-div {
      grid-area: 1 / 1 / 2 / 2;
    }
  }
  
  .hero {
    display: grid;
    min-width: 350px;
    width: 100%;
    height: 968px;
    object-fit: cover;
  }
  
  .hero-rectangle {
    width: 100px;
    height: 250px;
    opacity: 0.5;
    background-color: #fffff;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="hero-section"&gt;
    &lt;div class="row" style="padding: 0 15px; margin: 0px auto; background-color: #fff"&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;div class="banner-image-div"&gt;
          &lt;img src="https://source.unsplash.com/random" alt="" class="hero" /&gt;
          &lt;div class="hero-rectangle"&gt;
            &lt;p&gt;Text here &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I try to do that but can not place it above the hero image. How can I position it? Regards</p>