How to fix position image on another image

Question

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;
  }
}
*/

user_15273968 · Answer

You can use transform and aspect-ratio to achieve the result:

.checkoutWrapper {
  display: grid;
  grid-template-columns: 30% 70%;
  height: 100vh;
}

.left {
  background-color: #baafa0;
  position: relative;
  
  background-image: url('https://picsum.photos/id/1028/200/300');
  background-size: cover;
}

.phone {
  height: 60%;
  aspect-ratio: 1/2;
  
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  
  border-radius: 15%;
}

.right {
  padding-left: calc(15vh + 1rem);
}


  
    
  
  
    
      Check Out
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda consectetur ducimus officiis dicta vero distinctio odio sit explicabo illum dolorem quasi facilis repellendus sapiente fuga corporis, iure dolore ad, quis quisquam? Dolorum nostrum, veritatis
        molestiae culpa maiores exercitationem cumque qui harum, unde est ratione doloremque necessitatibus et numquam itaque neque!

user_13082654 · Answer

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)

user_15288641 · Answer

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%;
  align-items:center;
}

.checkoutImgs {
  position: relative;
}

img{
  object-fit:cover;
  display:block;
  height:100%;
}

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

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

}

.CheckoutProcess {
  padding: 1rem 2.4rem;
  display:grid;
  place-items:center
}


  
    
    
  

  
    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page
    avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les
    années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
    réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles,
    mais s'est aussi adapté à la bureautique informatique

user_13794450 · Answer

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




    
        
        
            
                THis is a heading
                this is a para
                this is a para
                this is a para

user_11299153 · Answer

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

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

I just made the left div in the snippet

user_14005542 · Answer

* {
  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;
  }
}


  
  
  
    
      Some heading
       
        Some text to go with the paragraph

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 :

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

How to fix position image on another image

6 Answers