'How to fix position image on another image

I have the following code (also pasted below), where I want to make a layout of two columns. In the first one I am putting two images, and in the second displaying some text.

In the first column, I want to have the first image with width:70% and the second one with position:absolute on it. The final result should be like this

As you see the second image partially located in first one in every screens above to 768px.

I can partially locate second image on first one, but that is not dynamic, if you change screen dimensions you can see how that collapse.

But no matter how hard I try, I can not achieve this result.

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
}

/* this .phone class should be dynamically  located partially on first image */
.phone {
  position: absolute;
  height: 90%;
  top: 5%;
  bottom: 5%;
  margin-left: 18%;
}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
}

.someContent {
  border: 1px solid red;
}

/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }
  img {
    display: none;
  }
  .CheckoutProcess {
    padding: 0;
  }
}
*/
<div class="checkoutWrapper">
  <img src="https://via.placeholder.com/300" class="coverIMGLast" />
  <img src="https://via.placeholder.com/300/ff0000" class="phone" />

  <div class="CheckoutProcess">
    <Content />
  </div>
</div>
htmlcsscss-grid


Solution 1:[1]

I edited your code

everything that you wrote is correct.

You just forget to add margin-left: 25%. no matter which screen you use, it always be partially located on first one. (by center)

Solution 2:[2]

With the code below, you have the structure that you want. All you have to do is to play with the width, height, etc to make exactly what you need.

.checkoutWrapper {
  display: grid;
  grid-template-columns: 50% 50%;
}

.checkoutImgs {
  position: relative;
  border: 2px solid red;
}

img{
  object-fit:cover;
  display:block;
}

.coverIMGLast {
  width: 70%;
  height: 100vh;
  
}

  
.phone {
  position: absolute;
  height: 80%;
  width:40%;
  top: 10%;
  right: 0;

}

.CheckoutProcess {
  padding: 5.8rem 6.4rem;
  border: 2px solid blue;
}



/* removing for demo purposes
@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }
  img {
    display: none;
  }
  .CheckoutProcess {
    padding: 0;
  }
}
*/
<div class="checkoutWrapper">
  <div class="checkoutImgs">
    <img src="https://via.placeholder.com/300" class="coverIMGLast" />
    <img src="https://via.placeholder.com/300/ff0000" class="phone" />
  </div>

  <div class="CheckoutProcess">
    <Content />
  </div>
</div>

Solution 3:[3]

check out this code, I created this design for you, may it help...

enter image description here

    body {
        padding: 0;
        margin: 0;
    }

    .parent {
        display: flex;
        position: relative;
        align-items: center;
    }

    .left {
        width: 37%;
        background-color: blue;
        height: 100vh;
    }

    .right {
        width: 63%;
        background-color: red;
        height: 100vh;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-container {
        position: absolute;
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .image {
        height: 500px;
        width: 250px;
        background-color: grey;
        margin-left: 30%;
        border-radius: 20px;
    }
<body>


    <div class='parent'>
        <div class='left'></div>
        <div class='right'>
            <div>
                <h3>THis is a heading</h3>
                <p>this is a para</p>
                <p>this is a para</p>
                <p>this is a para</p>
            </div>
        </div>

        <div class="image-container">
            <div class="image"></div>
        </div>
    </div>


</body>

Solution 4:[4]

You can make the first image as background image, then specify the background-size whichever size you want. Then add the second image inside the <div> element.

#bg-img{
  background-image:url('https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500');
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-color: #999;
}
#img-inside{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width:15%;
}
<div id="bg-img">
  <img id="img-inside" src="https://images.pexels.com/photos/36029/aroni-arsa-children-little.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="second-img" />
</div>

I just made the left div in the snippet

Solution 5:[5]

* {
  margin: 0;
}

.checkoutWrapper {
  display: grid;
  grid-template-columns: 35% 25% 40%; /* create three columns to fit both images  */
}

.coverIMGLast {
  width: calc(100% - 195px); **/* give that illution of real overlapping */**
  height: 100vh; /* please don't delete this line */
  grid-column: 1 / 3; /* overlapping */
  grid-row: 1;
  object-fit: cover;
}
/* this .phone class should be dynamically  located partially on first image */
.phone {
  height: 90vh;
  width: 380px;
  grid-row: 1; /* setting the images on one track / row */
  grid-column: 1/3; /* overlaping */
  justify-self: end;
  transform: translateY(5vh);
}

.CheckoutProcess {
  padding: 5.8rem 0.5rem 6.4rem; /* Add normal padding to give that effect */
}

.someContent {
  border: 1px solid red;
}

@media screen and (max-width: 768px) {
  .checkoutWrapper {
    display: grid;
    grid-template-columns: 100%;
  }

  img {
    display: none;
  }

  .CheckoutProcess {
    padding: 0;
  }
}

<div class="checkoutWrapper">
  <img src="https://via.placeholder.com/300" class="coverIMGLast" />
  <img src="https://via.placeholder.com/300/ff0000" class="phone" />
  <div class="CheckoutProcess">
    <div class="someContent">
      <h1>Some heading</h1>
      <p> 
        Some text to go with the paragraph 
      </p>
    </div>
  </div>
</div>

https://react-2djy5g-tsheob.stackblitz.io/

As you can see from the above code and link of your edited code.

You just had to make an illusion of the overlapping by using grid-column and playing with the template columns to create a book-like feeling.

with :

  1. grid-template-columns: 35% 25% 40%; /* create three columns to fit both images */
  2. grid-row: 1; /* setting the images on one track / row */
  3. grid-column: 1/3; /* overlaping */
  4. justify-self: end; /* placing image on the right side of the grid */

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vardan Hambardzumyan
Solution 2
Solution 3 Asad Ali
Solution 4 Arshed
Solution 5

Related Questions