What's a better way of centering overlapping images? - html

Question

TL;DR
Please review my code and help me answer the questions I have. You can find the code at the end of the question.
I've been learning HTML/CSS from freeCodeCamp and at the end of their Responsive Web Design course there're a few projects to do.
So I've started with the tribute page project.
I had an idea to center 3 images on the page, the middle image overlapping the two on the sides. however that was not an easy task since I don't know much about HTML/CSS. I've spent hours trying different methods and figuring out whether they work. Such as float: left, position: absolute, display: inline-block.
I think I did my best using display: inline-block however I would like you to take a look at what I did and tell me how I can improve it or what other methods we could use to achieve the same thing, just to see different ways of doing the same thing.
Questions
I've got a few problems with the current one as well which I would like you to help me fix.
Since I am using margin-left: -5%; for .figRight and .figLeft when I zoom in or zoom out of the page the ratio of the two images on the sides being hidden behind image in the middle changes. How can I make it so that the ratio of the images on the sides getting under the middle image are always the same? Let's say I want 5% of the images on the sides to be always behind the image in the middle.
When you zoom out of the page the texts below the images collapse. That also happens when you zoom in. How to avoid that? Maybe wrapping the text? Please see the screenshot below.
What do you think about the media queries I wrote? How can I make them work better? For example if you just run the code snippet below in full page and zoom until you have around 300px width you can see that it doesn't work as expected with smaller viewports i.e. the image on the right is moved down.
Code
Here's my link to codepen.io.
Here's the code just in case:
#main {
height: 100%;
background-color: #eee;
padding: 10px;
}
#title {
text-align: center;
}
body {
margin: 0;
color: #333;
}
#img-div {
/* position: relative; */
background-color: white;
text-align: center;
padding: 15px;
}
figure {
/* float: left; */
display: inline-block;
position: relative;
max-width: 300px;
height: auto;
text-align: center;
margin: 0;
}
#media (max-width: 786px) {
figure {
max-width: 150px;
font-size: 12px;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
img {
max-width: inherit;
border: 5px solid white;
border-radius: 50%;
}
.figLeft {
margin-right: -5%;
/* position: absolute; */
/* left: 15%; */
/* top: 30px; */
/* margin: 0 auto; */
}
.figMid {
/* position: absolute; */
/* left: 0; */
/* right: 0; */
/* margin: auto; */
z-index: 1;
}
.figRight {
margin-left: -5%;
/* position: absolute; */
/* right: 15%; */
/* top: 30px; */
/* margin: 0 auto; */
}
<main id="main">
<h1 id="title">Albert Einstein</h1>
<div id="img-div">
<!-- Figure 1 -->
<figure id="image" class="figLeft">
<img src="https://imgix.ranker.com/user_node_img/50065/1001294480/original/smoked-cigarette-butts-he-picked-off-the-street-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 2 -->
<figure id="image" class="figMid">
<img src="https://memolition.com/wp-content/uploads/2014/01/albert-einstein-10.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 3 -->
<figure id="image" class="figRight">
<img src="https://www.quotationof.com/images/albert-einstein-2.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<div style="clear: both"></div>
</div>
</main>

Answer 1

Answering to your questions:
1. How can I make it so that the ratio of the images on the sides getting under the middle image are always the same?
Do not use margin-left and margin-right to position the images. Instead, use transform. With the code below, your images will also be translated to the sides, but according to their own width. That way, if you zoom in or zoom out the page, they will stay at the same position. You can modify the percentage of translation as you want.
.figLeft {
transform: translateX(30%);
}
.figRight {
transform: translateX(-30%);
}
2. How to avoid the collapsing of the text below the images?
You can do that by limiting the width of figcaptions and centralizing them as the screen gets smaller:
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 70px;
margin: auto;
}
}
3. What do you think about the media queries I wrote? How can I make them work better?
The layout you should for the images in smaller screens is something you should decide. However, if you just want the images to have their width reduced as the screen size decreases, you can simply set a higher max-width specification for your first media query. That way, the image at the right will not move down anymore. The media queries would be this way:
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 100px;
margin: auto;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
The code snippet, for better view of the changes:
#main {
height: 100%;
background-color: #eee;
padding: 10px;
}
#title {
text-align: center;
}
body {
margin: 0;
color: #333;
}
#img-div {
/* position: relative; */
background-color: white;
text-align: center;
padding: 15px;
}
figure {
/* float: left; */
display: inline-block;
position: relative;
max-width: 300px;
height: auto;
text-align: center;
margin: 0;
}
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 70px;
margin: auto;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
img {
max-width: inherit;
border: 5px solid white;
border-radius: 50%;
}
.figLeft {
transform: translateX(30%);
}
.figMid {
z-index: 1;
}
.figRight {
transform: translateX(-30%);
}
<main id="main">
<h1 id="title">Albert Einstein</h1>
<div id="img-div">
<!-- Figure 1 -->
<figure id="image" class="figLeft">
<img src="https://imgix.ranker.com/user_node_img/50065/1001294480/original/smoked-cigarette-butts-he-picked-off-the-street-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 2 -->
<figure id="image" class="figMid">
<img src="https://memolition.com/wp-content/uploads/2014/01/albert-einstein-10.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 3 -->
<figure id="image" class="figRight">
<img src="https://www.quotationof.com/images/albert-einstein-2.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
</div>
</main>