Achieving an Overlapping image in a flex container with object-fit

Question

Hey there i have asked a similar question before and was able to achieve it , the thing is that i had to use a png image, the downside is that its way too big.

After some research i found a method using a svg container and a alpha and beta channel of the image.

However the main difficult i ran into is to get object-fit working so the image will always cover the full 50% of its flexbox container... is that even possible? what am i missing..thanks a lot.

https://codepen.io/HendrikEng/pen/RVzYoR?editors=0100

.c-hero {
   align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: grey;
  height: 30px * 15;
  text-align: center;

  &__image {
    display: flex;
    margin-bottom: -60px;
    margin-top: 60px + 19px;
    max-height: 682px;
    min-height: calc(100% + 140px);
    object-fit: cover;
    object-position: top;
    width: 50%;
  }

  &__item {
    align-self: center;
    width: 50%;
    }
}

<section>
  <div class="c-hero">
    <svg class="c-hero__image" preserveAspectRatio="xMinYMin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <mask id="transparentmask">
                <image width="100%" height="100%" xlink:href="http://i.imgur.com/n080w42.png"></image>
            </mask>
        </defs>
        <image mask="url(#transparentmask)" width="100%" height="100%"  xlink:href="http://i.imgur.com/LTgnz9E.jpg"></image>
    </svg>
    <div class="c-hero__item">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</section>

Answer 1

Please put the following css to your codepen:

/**
* @define c-hero; weak
*/

.c-hero {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: grey;
  height: 28.45vw;
  text-align: center;

  &__image {
   flex: 1 0 auto;
   min-height: 130.96%;
  }

  &__item {
    align-self: center;
    width: 50%;
  }
}

Answer 2

Though the question suggests of using overlapping images the actual scenario if I interpret it correctly is to have an image and a filled container side by side. The image to be used is the one having a little transparency at it's bottom. So while our eyes might differentiate the difference, for a browser its just the whole image.

Since you want the Height of the container next to the image = to be of the height of the image - the height of the transparent/white region.

There are few ways it can be achieved

1) Using 2 separate images:

The part which looks like it's overlapping can be a different image with absolute positioning having z-index greater than the background image element. The background image element and the next filled-container can have the same height.

2) If we have a fixed height for image then we can for this particular case use 86% of the image height for the other half. It will produce the same illusion. 86% because the background fully covered is 86% of that of the whole image. Yeah I measured the pixel ratio using GIMP.

This particular case has more to do with the image size you are using rather than some programming skills. Though what you seek can be achieved. To replicate that I created this responsive solution in codepen.

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-img {
  background-image: url(http://i.imgur.com/CkwLRd0.jpg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.banner {
  display: flex;
}

.half {
  width: 50%;
  height: 400px;
}

.red {
  background: indianred;
}

.text-holder {
  height: 86%;
}

<div class="wrapper">
    <div class="banner">
       <div class="half">
          <div class="hero-img"></div>
       </div>
       <div class="half">
          <div class="red text-holder"></div>
       </div>
    </div>
</div>

Please note that the wrapper is set to max-width: 1200px due to the relative image size used.

Let me know if it solved your issue or if you need some more help.