Question

0

238

Views

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>

over 4 years ago · Santiago Trujillo

6 answers

Answer question

0

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>

over 4 years ago · Santiago Trujillo Report

0

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>

over 4 years ago · Santiago Trujillo Report

0

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)

over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report

0

* {
  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 :

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

over 4 years ago · Santiago Trujillo Report

Answer question

Find remote jobs

Accepted Answer · 2022-03-03T18:33:11.944Z

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

<div class="checkoutWrapper">
  <div class="left">
    <img class="phone" src="https://via.placeholder.com/300/444" />
  </div>
  <div class="right CheckoutProcess">
    <Content>
      <h1>Check Out</h1>
      <p>
        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!
      </p>
    </Content>
  </div>
</div>

0

238

How to fix position image on another image

6 answers

0

0

0

0

0

0

Find remote jobs

Andres GPT