Create banner inside a hero image

Question

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

I created a CodePen with example

.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;
}

<section class="hero-section">
  <div class="row" style="padding: 0 15px; margin: 0px auto; background-color: #fff">
    <div class="col-sm-12">
      <div class="banner-image-div">
        <img src="https://source.unsplash.com/random" alt="" class="hero" />
        <div class="hero-rectangle">
          <p>Text here </p>
        </div>
      </div>
    </div>
  </div>
</section>

I try to do that but can not place it above the hero image. How can I position it? Regards

0.3 and 0.7 for opacity are two numbers I tend to use a lot of opacity. For the background-color of `.hero-rectangle`, I would go with `rgba(255, 255, 255, 0.7);` — Rickard Elimää, May 23 '21 at 18:44

score 1 · Answer 1 · answered May 23 '21 at 18:39

As absolute elements are positioned relatively to their closest relative positioned ancestor, in order to position your absolute element, you need to:

Make its parent (.banner-image-div) have position: relative.
Add the top and left properties to your .hero-rectangle style.

.parent {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

.child {
  width: 80px;
  height: 80px;
  background-color: white;
  position: absolute;
}

.parent.well-defined {
  position: relative;
}

.child.well-defined {
  top: 50px;
  left: 50px;
}

<div class="parent">
  <div class="child">
    I'm not positioned well :(
  </div>
</div>

<br/><br/>

<div class="parent well-defined">
  <div class="child well-defined">
    I'm well positioned :)
  </div>
</div>

In order to position the element in the middle vertically, you need to add `top: 50%` and then `transform: translateY(-50%)`. — Rickard Elimää, May 23 '21 at 18:50

dale landry · Accepted Answer · 2021-05-23T18:54:29.603

Set the your positioning properties within the hero-rectangle element to position it properly. I also added:

.banner-image-div {
  position: relative;
}

To make the bubbling for the position absolute the image container.

MDN: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, (element with position: absolute;), if any otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

.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;
  position: relative;
  .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;
}

.banner-image-div {
  position: relative;
}

.hero-rectangle {
  width: 100px;
  height: 250px;
  opacity: 0.5;
  background-color: #eee;
  position: absolute;
  right: 25%;
  top: 35%;
}

<section class="hero-section">
  <div class="row" style="padding: 0 15px; margin: 0px auto; background-color: #fff">
    <div class="col-sm-12">
      <div class="banner-image-div">
        <img src="https://source.unsplash.com/random" alt="" class="hero" />
        <div class="hero-rectangle">
          <p>Text here </p>
        </div>
      </div>
    </div>
  </div>
</section>

Create banner inside a hero image

2 Answers2