Design a banner within the main image

Question

Design a banner within the main image

I'm a CSS newbie looking to enhance my simple responsive hero grid by adding a banner with white text and 0.5 opacity at the center-right.

https://i.sstatic.net/qoQic.jpg

Check out my CodePen example here.

.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've been struggling to position it above the hero image. Any tips on how I can achieve that? Thanks!

css

Answer 1

Answer №1

Adjust the positioning properties for the hero-rectangle element to properly position it. Additionally, I have included:

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

To make the image container positioned absolutely for bubbling.

MDN: The element is taken out of the regular document flow, leaving no space in the page layout for it. It is placed relative to its closest ancestor with a defined position (element with position: absolute;). If no such ancestor exists, it is positioned relative to the initial containing block. The final position is determined by 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>

Answer 2

Adjust the positioning properties for the hero-rectangle element to properly position it. Additionally, I have included:

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

To make the image container positioned absolutely for bubbling.

MDN: The element is taken out of the regular document flow, leaving no space in the page layout for it. It is placed relative to its closest ancestor with a defined position (element with position: absolute;). If no such ancestor exists, it is positioned relative to the initial containing block. The final position is determined by 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>

Answer 3

Answer №2

When dealing with absolute elements, keep in mind they are positioned relative to their closest relative ancestor. To properly position your absolute element, follow these steps:

Ensure the parent (.banner-image-div) has a position: relative property.
Add the top and left properties to the style of your .hero-rectangle.

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

Answer 4

When dealing with absolute elements, keep in mind they are positioned relative to their closest relative ancestor. To properly position your absolute element, follow these steps:

Ensure the parent (.banner-image-div) has a position: relative property.
Add the top and left properties to the style of your .hero-rectangle.

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

Design a banner within the main image

Answer №1

Answer №2

Similar questions

CSS Dropdown Menu Malfunctioning

Having difficulty scrolling down in a section with 100% height on iOS devices

Tips on reducing the height and improving responsiveness in Bootstrap 4

Looks like there's an issue: $("div#created") does not have a function called scrollintoview in jQuery

Having trouble getting Bootstrap CSS to load in an .ejs file?

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

The Carousel is covering up my Mega-Menu and it is not visible on top

Animating links with multi-line effects on :before.orEnhancing

ngx hierarchical dropdown

Adjusting an HTML table to fit within a designated space

The webpage fails to automatically scroll to the bottom

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

Placing a table within a div causes the div to expand in width beyond 100%

Adaptable CSS column layout

In the past, I've crafted buttons and other elements using Photoshop, and subsequently saved them for web use. However, I'm now contemplating whether it's more advantageous to employ CSS in

Trouble centering a list within a parent div using CSS

Issue with fixed header in Vuetify v-data-table not functional

Problem with CSS: In Chrome, text fields have 3px additional margin-right

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles