Tengo el siguiente código (también pegado a continuación), donde quiero hacer un diseño de dos columnas. En el primero pongo dos imágenes, y en el segundo muestro algo de texto.
En la primera columna, quiero tener la primera imagen con width:70% y la segunda con position:absolute . El resultado final debería ser así .
Como puede ver, la segunda imagen se encuentra parcialmente ubicada en la primera en todas las pantallas anteriores a 768px .
Puedo ubicar parcialmente la segunda imagen en la primera, pero eso no es dinámico, si cambia las dimensiones de la pantalla, puede ver cómo colapsa.
Pero no importa cuánto lo intente, no puedo lograr este resultado.
.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>Con el siguiente código, tiene la estructura que desea. Todo lo que tienes que hacer es jugar con el width , la height , etc. para hacer exactamente lo que necesitas.
.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>echa un vistazo a este código, creé este diseño para ti, puede ayudarte...
ingrese la descripción de la imagen aquí
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>Puede usar transform y aspect-ratio para lograr el resultado:
.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>Puede crear la primera imagen como imagen de fondo y luego especificar el tamaño de fondo del tamaño que desee. Luego agregue la segunda imagen dentro del elemento <div> .
#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> Acabo de hacer el div izquierdo en el fragmento
* { 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/
Como puede ver en el código anterior y el enlace de su código editado.
Solo tenías que crear una ilusión de superposición usando grid-column y jugando con las columnas de la plantilla para crear una sensación de libro.
con :
grid-template-columns: 35% 25% 40%; /* crea tres columnas para que quepan ambas imágenes */grid-row: 1; /* colocando las imágenes en una pista / fila */grid-column: 1/3; /* superposición */justify-self: end; /* colocar la imagen en el lado derecho de la grilla */