Why the figcaption is hidden in the Grid container

hi

For some reason my figcations are hidden in the Grid Container… Why…

How to un hide the caption. Below the picture

Link to the code
Thee Link

CSS part

:root {
  --text-color: #404040;
  --header-bg: #d6f5f5;
}

body {
  box-sizing: border-box;
  color: var(--text-color);
  margin: 0;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--header-bg);
  height: 250px;
  border: solid;
  width: 100%;
}

header h1 {
  font-size: 3rem;
  margin: 0;
}

header p {
  font-size: 1.5rem;
  margin: 0;
}

.all_projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr 1fr;
  grid-template-areas:
    "header header header"
    "g_project_1 g_project_2 g_project_3"
    "g_project_4 g_project_4 g_project_3";
  gap: 20px 20px;
  border: solid pink;
  background-color: #fff3e6;
}
.project-title {
  grid-area: header;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  font-size: 2rem;
  line-height: 1.1;

  border: solid;
  background-color: #ccccff;
}

span.project-title-newline {
  display: block;
  border: solid;
  background-color: #c2c2a3;
}

span.sizeof-i {
  font-size: 3rem;
}

img {
  transition-property: transform;
  transition-duration: 0.7s;
  transition-timing-function: ease-out;
  width: 100%;
  height: 100%;
  

  /*object-fit: cover;*/
}

figcaption {
  position: relative;
  
  border: solid;
  font-size: 2em;
  margin: 10px;
  
}

.project_1 figcaption {
  top: 50%;
  left: 50%;
}

.project_1 {
  grid-area: g_project_1;  
  width: 320px;
  height: 310px;
  margin: 0;
  overflow: hidden;
  border: solid;
  background-color: #ffecb3;
}

.project_2 {
  grid-area: g_project_2;
  border: solid;
  background-color: #ffecb3;
  width: 320px;
  height: 310px;
  overflow: hidden;
  margin: 0;
}

.project_3 {
  grid-area: g_project_3;
  border: solid;
  background-color: #ffecb3;
  width: 405px;
  height: 645px;
  overflow: hidden;
  margin: 0;
}

.project_4 {
  grid-area: g_project_4;
  border: solid;
  background-color: #ffecb3;
  width: 665px;
  height: 310px;
  overflow: hidden;
  margin: 0;
}

img:hover {
  transform: scale(1.09);
}
/*992px and 600px*/

@media (max-width: 600px) {
  .all_projects {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
    "header"
    "g_project_1"
      "g_project_2"
      "g_project_3"
    "g_project_4";
    grid-auto-flow: column;
    gap: 20px 20px;
    border: solid pink;
    background-color: red;
    
  }
  
  .project_1, .project_2, .project_3, .project_4 {
    width: 320px;
    height: 310px;
    margin-left: auto;
    margin-right: auto;
    
  }

Html Part

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<header id="welcome-section">
  <h1>I am Alexander</h1>
  <p>A Baby Web Developer</p>
</header>

<section id="projects" class= "all_projects">
  <h2 class="project-title  project-tile">
    Bask On The Projects <span class="project-title-newline">That <span class="sizeof-i">I</span> Brought Life To</span>
  </h2>
  <figure class="project_1">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
    <!-- half size of the origianl width="478.75" height="249.75" -->
    <figcaption>Tribute Page</figcaption>
  </figure>
  
  <figure class="project_2">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
    <figcaption>Caption project 2</figcaption>
  </figure>
  
  <figure class="project_3">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
    <figcaption>Caption Project 3</figcaption>
  </figure>
  
  <figure class="project_4">
    <a href="https://codepen.io/Alexanderthe3rd/full/BaorBNp" target="_blank"> <img src="https://res.cloudinary.com/alexanderthe3rd/image/upload/v1594140260/Portfolio%20Project/Tribute_Page_Screenshot_w1915xh999.jpg" alt="Screenshot Of The Tribute Page Project" ></a>
    <figcaption>Caption Project 4</figcaption>
  </figure>
  
</section>

You want the parent container (the figure element) to be position: relative and the figcaption element to use position: absolute so it is absolutely positioned relative to its parent container.

Also, top: 50%, left: 50% will not center the element, you need to use transform: translate(-50%, -50%) as well.

figure {
  position: relative;
}

figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

hi
Thanks a mill. Though its not perfectly centered. Ill try play around it.

Though the image and the caption are within one container. Why the image pushes the caption text and makes it hidden? Why the size of the image is not reduced and allows the text to be seen?