Geek Answers Handbook

Achieving an overlapping image in a flexible object-oriented container

Hi, I asked a similar question before and was able to reach it, the fact is that I had to use a png image, the disadvantage is that its path is too long.

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

However, the main difficulty I came across is to get an object oriented job so that the image always covers the full 50% of its flexbox container ... is this possible? that I will miss .. a lot.

The effect I'm trying to achieve

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>
+7
css flexbox css3 svg object-fit
source share
2 answers

Please put the following css code in your code:

 /** * @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%; } }
+6
source share

Although the question involves the use of overlapping images, the actual scenario, if I interpret it correctly, should have an image and a filled container side by side. The image used is the one with little transparency at the bottom. Therefore, while our eyes can tell the difference, for the browser this is just an image.

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

There are several ways to achieve this.

1) Using 2 separate images:

The part that looks like overlapping may be another image with absolute positioning with a z-index larger than the background image element. The background image element and the next full container can have the same height.

2) If we have a fixed height for the image, then for this particular case we can use 86% of the image height for the other half. This will create the same illusion. 86%, because the background is completely covered 86% of the entire image. Yes, I measured the pixel ratio using GIMP.

This particular case is more about the size of the image you are using, rather than some programming skills. Although what you are looking for can be achieved. To reproduce what 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>

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

Let me know if your problem has been resolved or if you need more help.

+3
source share

More articles:


All Articles