Overflow:hidden - is there any way to make a specific child visible?

Question

I need the grey half-circle to include the quote so that it will be the correct height, but I also need that line to be able to overflow from it's containers.

.CONTAINER {
  width: 70%;
  position: relative;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 25%;
  margin-bottom: -10px;
  overflow: hidden;
}

.halfCircle {
  max-width: 100%;
  background: darkgray;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom: 0;
  text-align: center;
  overflow: visible;
  margin-bottom: -10px;
}

#QUOTE22 {
  text-align: center;
  margin-top: -32px;
  font-size: 1.3em;
  letter-spacing: 2px;
  font-weight: 30;
}

#PLogo {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 200px;
}

#FrontQuote {
  height: 1.3em;
  width: 1.3em;
  position: relative;
  right: -5px;
}

#QUOTE {
  text-align: center;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 1.3em;
}

#QUOTE12 {
  text-align: center;
  line-height: 100%;
  letter-spacing: 0px;
  font-size: 1.3em;
  margin-top: 10px;
  z-index: 100;
  overflow: visible;
}

#BackQuote {
  height: 1.7em;
  width: 1.7em;
  transform: rotate(180deg);
  z-index: 100;
  overflow: visible;
}

#stock1 {
  position: absolute;
  margin-top: -52.5px;
  margin-left: -8px;
  width: 101.5vw;
  height: auto;
  max-height: 500px;
  filter: grayscale(1);
  opacity: .5;
  background: #121212;
  z-index: -1;
}

<div class="CONTAINER">
  <div class="halfCircle">
    <img id="PLogo" src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_438,h_438,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
    <p id="QUOTE12"><img id="FrontQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"> WHAT WE LEARN WITH PLEASURE, WE NEVER FORGET

      <sub><sub><img id="BackQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"></sub></sub>
    </p>
  </div>
</div>
</section>

<section id="SKILLS">


  <p id="QUOTE22">- ALFRED MERCIER</p>

  <img id="stock1" src="https://media.istockphoto.com/photos/graphic-designer-drawing-on-graphics-tablet-at-workplace-picture-id865230556">

Some additional information, since the bot says I need more words:

• I read on another post that someone suggested having a container around the half circle and have that be overflow:hidden so that the child of the child wouldn't be effected, but that hasn't worked for me below.

• I'd prefer HTML or CSS answers only, since that's all I know at the moment... but if there's no other way, I'll try other languages.

• It's going to be difficult for me to adjust position too much, but I read another comment somewhere that position might be an issue, so I tried to take position tags off of as many elements as I could.

Answer 1

position:relative; should bring it on top. You may add a z-index value if that is not efficient.

example

.CONTAINER {
  width: 70%;
  position: relative;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 25%;
  margin-bottom: -10px;
  overflow: hidden;
}

.halfCircle {
  max-width: 100%;
  background: darkgray;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border-bottom: 0;
  text-align: center;
  overflow: visible;
  margin-bottom: -10px;
}

#QUOTE22 {
  text-align: center;
  margin-top: -1em;
  font-size: 1.3em;
  letter-spacing: 2px;
  font-weight: 30;
  position:relative;/* added <====== */
}

#PLogo {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 200px;
  width: 200px;
}

#FrontQuote {
  height: 1.3em;
  width: 1.3em;
  position: relative;
  right: -5px;
}

#QUOTE {
  text-align: center;
  line-height: 100%;
  letter-spacing: 1px;
  font-size: 1.3em;
}

#QUOTE12 {
  text-align: center;
  line-height: 100%;
  letter-spacing: 0px;
  font-size: 1.3em;
  margin-top: 10px;
  z-index: 100;
  overflow: visible;
}

#BackQuote {
  height: 1.7em;
  width: 1.7em;
  transform: rotate(180deg);
  z-index: 100;
  overflow: visible;
}

#stock1 {
  position: absolute;
  margin-top: -52.5px;
  margin-left: -8px;
  width: 101.5vw;
  height: auto;
  max-height: 500px;
  filter: grayscale(1);
  opacity: .5;
  background: #121212;
  z-index: -1;
}

<div class="CONTAINER">
  <div class="halfCircle">
    <img id="PLogo" src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_438,h_438,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">
    <p id="QUOTE12"><img id="FrontQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"> WHAT WE LEARN WITH PLEASURE, WE NEVER FORGET

      <sub><sub><img id="BackQuote" src="https://static.wixstatic.com/media/058e45_df55c46642a94f489cf76fa18cc13cb8~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01/Logo%20Quotes.webp"></sub></sub>
    </p>
  </div>
</div>
</section>

<section id="SKILLS">


  <p id="QUOTE22">- ALFRED MERCIER</p>

  <img id="stock1" src="https://media.istockphoto.com/photos/graphic-designer-drawing-on-graphics-tablet-at-workplace-picture-id865230556">