cssflexboxoverlayobject-fit

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


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?


Solution

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