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

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">