<div class="container">
<p>CSS Grid Method</p>
<div class="image-stack">
<div class="image-stack__item image-stack__item--top">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/portrait1.jpeg" alt="">
</div>
<div class="image-stack__item image-stack__item--bottom">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110238/texture-waves-cropped.jpg" alt="">
</div>
</div>
<p>Text can go down here yabba dabba do</p>
</div>
// Non relevant styles
* {
box-sizing: border-box;
}
p {
font-size: 20px;
font-family: sans-serif;
color: #6439a9;
}
.container {
padding: 100px 30px;
width: 100%;
margin: 0 auto;
max-width: 900px;
}
// Relevant styles
.image-stack {
display: grid;
position: relative; // imperative for the overlapping to work
grid-template-columns: repeat(12, 1fr);
}
.image-stack__item--bottom {
grid-column: 4 / -1;
grid-row: 1;
}
.image-stack__item--top {
grid-row: 1;
grid-column: 1 / span 8;
padding-top: 20%; // slightly arbitrary, keeps proportion once resized
z-index: 1; // tells the browser to make this image on top
}
img {
width: 100%;
display: block;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.