how to resize an overlayed div depending on the img's size-CodePudding

I used this css to overlay the two elements, the image is underneath the overlayed texts: I need to make sure that the overlay-ed layer should be resized automatically depending on the image's size to ensure a good UI of the elements .

.overlay {
  position: relative;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  opacity: 1;
  color: white;
  font-size: 20px;
  text-align: center;
  z-index: 2;
  display: flow-root;
}

.underneath {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.container {
  position: relative;
}

.h1 h3 {
  color: rgb(255, 255, 255) !important;
}

<div >
  <div >
    <img src="./overviewBanner.webp">
  </div>
  <div >
    <h1>
      <strong>Let's see what to do today</strong>
    </h1>
    <h3> Check below how to contribute</h3>
  </div>
</div>

CodePudding user response：

How I'd do something like this is using inset: 0 on the overlay whilst adding postition: absolute to the overlay too and removing position: absolute; from the .underneath class. (Inset: 0 is basically shorthand for top:0; bottom: 0; right: 0; left: 0.).

So:

.container { 
  max-width: fit-content;
}
.overlay { 
  position: absolute;
  inset: 0;
}

If you need the image to bee 100% container width and potentially wider than the image's full width I'd use a background-image on the .underneath class instead of an img tag and give the .underneath div a set height and remove max-width: fit-content from the container.

.underneath {
  z-index: 1;
  height: 600px; 
  width: 100%;
  background-image: url(./overviewBanner.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

CodePudding user response：

One approach, with two different image-sizes, is below; in each case the CSS remains exactly the same. To achieve this we take advantage of CSS grid, placing both the overlay and the underneath in the same cell, and placing the overlay 'above' (between the underneath and the viewer) due to its later position in the DOM.

The code for this is below, with explanatory comments in the CSS; please note: I removed the use of z-index and position: absolute, as they aren't necessary to achieve the end-result:

/* to allow for font-sizing across the page: */
:root {
  --fontBaseSize: 16px;
  --fontScale: 1;
}

/* a simple CSS reset to remove browser-default margins
   and padding, and specifying that all elements should
   be sized to include border-width and padding in their
   declared sizes; also sets the shared font-size, and
   font-family: */
*,
::before,
::after {
  box-sizing: border-box;
  font-family: system-ui;
  font-size: calc(var(--fontBaseSize) * var(--fontScale));
  margin: 0;
  padding: 0;
}

.container {
  /* using CSS grid: */
  display: grid;
  /* setting one column to take up all
     available space: */
  grid-template-columns: 1fr;
  /* using margin-block (CSS logical property)
     to place a 1em margin both before and after
     the element on its block axis: */
  margin-block: 1em;
}

.underneath {
  /* positioning the element in the first row
     and first column of the grid: */
  grid-area: 1 / 1;
}

.overlay {
  /* setting background-color and color properties: */
  background-color: rgb(0 0 0 / 0.5);
  color: rgb(235 235 235 / 1);
  display: grid;
  /* positioning the element in the first row
     and first column of the grid: */
  grid-area: 1 / 1;
  /* this places the grid-items in the center, on
     both inline and block axes: */
  place-content: center;
}

h1 {
  /* demonstrating the use of the --fontScale custom property,
     the font-size is calculated via the the CSS calc() function
     multiplying the --baseFontSize by the --fontScale; therefor
     changing the --fontScale property changes the  calculated
     result: */
  --fontScale: 2;
}

h3 {
  --fontScale: 1.2;
}

<div >
  <div >
    <img src="//via.placeholder.com/400">
  </div>
  <div >
    <h1>
      <strong>Let's see what to do today</strong>
    </h1>
    <h3> Check below how to contribute</h3>
  </div>
</div>

<div >
  <div >
    <img src="//via.placeholder.com/950">
  </div>
  <div >
    <h1>
      <strong>Let's see what to do today</strong>
    </h1>
    <h3> Check below how to contribute</h3>
  </div>
</div>

JS Fiddle demo.

References: