How can I make flexbox overlay with object-fit working properly

Question

This may be a begginer question, but I just can't seem to figure it out.

HTML:

        <div id = "upper">
            <input id = "leftBigArrow" class = "button" type="button">
            <div id = "picBox">
                <img id = "bigPic" src="images/IMG_1744.JPG" alt="">
                <div id = "overlay">
                    <div id = "olText">
                        <h1>Title</h1>
                        <p>Description</p>
                    </div>
                </div>
            </div>
            <input id = "rightBigArrow" class = "button" type="button">
        </div>

CSS:

#upper {
    display: flex;
    background: white;
    box-shadow: 0px 0px 7px 2px #313131;
}

#picBox {
    width: 800px;
    height: 600px;
    background-color: #8D918D;
    display: flex;
}

#pigPic {
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

#overlay {
    align-self: flex-end;
    width: 100%;
    height: 20%;
    background-color: black;
    color: white;
    opacity: 0.6;
    margin: 0;
    font-size: 80%;
    z-index: 2;
}

#olText {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
}

h1, p {
    margin-left: 20px;
    
}

h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

In #picBox I have 2 items, an image (#bigPic) with object-fit attribute and a div with a div with 2 text items (#overlay). I want to have the overlay over the image. Overlay height is 20% at the bottom of #picBox and the 2 text items in #olText need to be arranged as css shows. If I use position absolute and relative, it messes up the object-fit. So how can I make this work as I intended?

score 1 · Accepted Answer · edited Aug 13 '21 at 10:24

In CSS, if you want to overlay an element, that element's position (in this case #picBox) needs to be set to relative first. Then the position of the element you want on top (#overlay) should be set to absolute. See the example below.

#upper {
  display: flex;
  background: white;
  box-shadow: 0px 0px 7px 2px #313131;
}

#picBox {
  width: 800px;
  height: 600px;
  background-color: #8D918D;
  display: flex;
  position: relative;
}

#pigPic {
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

#overlay {
  align-self: flex-end;
  width: 100%;
  height: 20%;
  background-color: black;
  color: white;
  opacity: 0.6;
  margin: 0;
  font-size: 80%;
  z-index: 2;
  position: absolute;
}

#olText {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

h1,
p {
  margin-left: 20px;
}

h1 {
  margin-top: 0;
  margin-bottom: 10px;
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

<div id="upper">
  <input id="leftBigArrow" class="button" type="button">
  <div id="picBox">
    <img id="bigPic" src="https://www.w3schools.com/tags/img_pink_flowers.jpg" alt="">
    <div id="overlay">
      <div id="olText">
        <h1>Title</h1>
        <p>Description</p>
      </div>
    </div>
  </div>
  <input id="rightBigArrow" class="button" type="button">
</div>

How can I make flexbox overlay with object-fit working properly

1 Answers1