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>

Kosh · Accepted Answer · 2017-06-02T00:32:44.077

6

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%;
  }
}

edited Jun 02 '17 at 00:32

answered Jun 02 '17 at 00:13

Kosh

16,966
2
19
34

thanks a lot, thats awesome, how on earth did u come up with the numbers? it wont be possible with a fixed hero height right? – HendrikEng Jun 02 '17 at 08:13
You're absolutely right, it's not possible with a fixed hero height. Because we need to preserve the image aspect ratio. – Kosh Jun 02 '17 at 14:35
nice...one thing i was wonder is why u used vw to calculate the height instead of vh. If i would need to make the whole hero higher, how would i calculate the min-height to keep the ratio? ...thanks a lot :-) – HendrikEng Jun 02 '17 at 14:40
If you want `the image will always cover the full 50% of its flexbox container` and preserve the image aspect ratio as well, and if you also want to make `hero` higher then you have to make `hero` wider as well. Another option is to cut the image (e. g. with extra `overflow:hidden` container). – Kosh Jun 02 '17 at 15:12

score 3 · Answer 2 · answered Jun 01 '17 at 22:23

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.

Thanks a lot for ur reply. I kinda got a similar result with a png image earlier https://codepen.io/HendrikEng/pen/eWLmBP the problem i had was the big file size and the issue that the image would break out of its container (browserZoom). It doesn't happen with your solution. Is your second solution the better one for e.g. a fully responsive container using a bigger image to avoid the max-width or could it be achieved more precisely with your first solution wich sounds a bit similar to the one in my question ( instead of an absolute image below, a alpha mask on top) thanks again, u rock. — HendrikEng, Jun 01 '17 at 23:20
Great idea to crop the image. It reduces image size. But if you add e. g. `body {background:blue}` to your css, you'll see that result is not really good. It is not all that svg mask stuff was made for. Sorry. — Kosh, Jun 02 '17 at 00:54
Most welcome @HendrikEng...the proper way most designers would do is proposed in my first solution... because that won't require the need to have arbitrary percentages calculations. However I won't recommend using alpha mask the way you are talking instead what I would do is take out the whole writing pad with mobile (using some image manipulation tools) and use it directly on top of the image. More over the image you are using isn't optimized which will lead to slow loading of the page and you dont want that. If you are not familiar with image editing go with the second option I showed. — Dibyanshu, Jun 02 '17 at 11:09
@Kosh if we use a png image as opposed to jpg..it will do... I left that for the further...+1 for your solution. :) — Dibyanshu, Jun 11 '17 at 01:39

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

2 Answers2