'Text below image is not shown html

I've ran into another problem in which the text is not shown below an image:

I know there must be something wrong with my CSS code so here it is:

@font-face {
  font-family: 'mainFont';
  src: url("../Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

@font-face {
  font-family: 'descFont';
  src: url("../Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}

.project_button {
  font-family: 'descFont';
  font-weight: normal;
  font-style: normal; 

  background-color: #181818;
  border: none;
  color: white;
  /* padding: 20px; */

  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 6px;
  border-radius: 10px;

  cursor: pointer;

  width: 450px;
  height: 250px;

  box-shadow: 0px 16px 16px rgba(0,0,0,0.14);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.main_Head {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  /* font-size: 5.6vw; */
  font-size: 80px;
  color: #181818;

  text-align: center;
  position: relative;

  text-shadow: 0px 0px 35px #b2b2b2;
}

.project_button:hover {
  transform: scale(1.03);
}

.banner {
  width: 350px;
  height: 190px;
  
  /* border: 4px solid #181818; */
  transition: all .2s ease-in-out;
  background-size: cover;
}

.banner:hover {
  cursor: pointer;
  transform: scale(1.105);
}

.projectDesc {
  font-family: 'descFont';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #181818;
}

#button_container {
  width: 350px;
  height: 190px;
  
  border: 4px solid black;
  /* border-radius: 10px; */
  overflow: hidden;

  display: inline-block;
  margin: 50px 50px;
  
  align-items: left;
  justify-content: left;
}

And just in case if you want my HTML code, here it is:

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Saharsh | Projects</title>
  
  <link rel='stylesheet' href='/Styles/projects.css'>
  <link rel='stylesheet' href='../style.css'>
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>

  <link rel='icon' type='image/x-icon' href='/Images/Branding/pfp.png'>
</head>

<body class='container'>
  <div id='home'>
    <nav class='navbar'>
      <ul>
        <li><a href='../index.html'>Home</a></li>
        <li><a href='#aboutMe'>About me</a></li>
        <li><a href='#moreSoon'>Contact me</a></li>
      </ul>
    </nav>
  </div>

    <br class='us'><br class='us'><br class='us'>
    <br class='us'><br class='us'><br class='us'>
    <br class='us'>

  <div>
    <h1 class='main_Head'>My Projects 📦</h1>
  </div>
    
  <br class='us'><br class='us'><br class='us'>
  <br class='us'>
  
  <div>
    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Modular_FPS.png'/></a>
      <h1>HELLO!</h1>
    </div>

    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Advanced_FPS_Movement.png'/></a>
    </div>

    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Minecraft_Player_Movement.png'/></a>
    </div>

    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Multiplayer_First_Person.png'/></a>
    </div>

    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Multiplayer_Third_Person.png'/></a>
    </div>

    <div id='button_container' class='us'>
      <a><img class='banner' src='../Images/Projects/Multiplayer_CarRacing.png'/></a>
    </div>
  </div>

  <br class='us'><br class='us'><br class='us'>
  <h2 class='projectDesc'>
    yet in development
  </h2>
  <br class='us'><br class='us'><br class='us'>

  <div>
    <h1 id='moreSoon' style='text-align: center;'>
      <a href='https://github.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/github.svg'></span></a>
      <a href='https://discord.gg/bkP2P5uuH2' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/discord.svg'></span></a>
      <a href='https://youtube.com/SaharshDev' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/youtube.svg'></span></a>
      <a href='https://twitter.com/Saharsh1223' target='_blank'><span class='icon_span'><img class='icon' src='/Images/Socials/twitter.svg'></span></a>
    </h1>
  </div>

  <br class='us'>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src='Scripts/scrollSmooth.js'> </script>
  <!-- <script src='Scripts/i_am_a.js'> </script> -->
</body>

</html>

I've tried:

Changing the text colour
Removing the image element
Changing the background colour

And they don't seem to work so here I am. Thanks in Advance!

html css fonts

Solution 1:^[1]

Nevermind I have fixed it myself, the problem was in the button_container, I set overflow: hidden; which basically used to hide the stuff which is outside of it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Saharsh

'Text below image is not shown html

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]