Visit this link for more details
I've been attempting to create an overlap effect with 3 photos using CSS Grid. My desired outcome looks like this:
Click here to see the desired result
I followed tutorials that demonstrate the same method, but unfortunately, I couldn't achieve the desired look. Here are the tutorials I referenced: Tutorial 1, Tutorial 2
My current output resembles what is shown in the CodePen example and I'm unsure of where I made a mistake!
Here is the code snippet I am working with:
section {
display: grid;
grid-template-columns: repeat(4, 1fr);
div:first-child {
grid-column: 2 / span 3;
}
div:nth-child(2) {
grid-column: 1 / span 2;
}
div:last-child {
grid-column: 2 / span 2;
}
}<section>
<div>
<img src="img/cancer/face1.svg" alt="face1">
</div>
<div>
<img src="img/cancer/cancer.jpg" alt="cancer">
</div>
<div>
<img src="img/cancer/point1.svg" alt="point1">
</div>
</section>