CSS Positioning card outside of header container - html

Question

I am attempting to position a card over a gradient background. Currently, I tried pushing the card down using margins but the card is being cut off once it gets to the end of the container. I would like to have the card sit on top of the end of the gradient background. I attempted to work around this issue using z-index on the card but it did not have an effect. I also tried using position: absolute but the card is still getting cut off at the end. How can I have the card position over the background to show the full
Here is my code snippet:
.content-container-header {
overflow: hidden;
height: 800px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
}
.flex-display {
display: flex;
}
.justify-center {
justify-content: center;
}
.margin-bottom-96 {
margin-bottomottom: 96px;
}
.header-content-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.container-1200 {
margin: 0 auto;
max-width: 1200px;
}
.margin-top-128 {
margin-top: 128px;
}
.margin-top-300 {
margin-top: 300px;
}
.align-center {
align-items: center;
}
.flex-display-col {
flex-direction: column;
}
.featured-post-ct {
width: 978px;
height: 308px;
background: #FFFFFF;
-webkit-box-shadow: 0px 8px 24px -4px rgb(150 166 198 / 18%), 0px 2px 6px -1px rgb(150 166 198 / 16%);
box-shadow: 0px 8px 24px -4px rgb(150 166 198 / 18%), 0px 2px 6px -1px rgb(150 166 198 / 16%);
border-radius: 8px;
}
.div-50 {
width: 50%;
}
.margin-r-32 {
margin-right: 32px;
}
.margin-bottom-8 {
margin-bottomottom: 8px;
}
<div class='content-container-header flex-display justify-center margin-bottom-96'>
<div class="container-1200 header-content-posts">
<div class="flex-display flex-display-col justify-center align-center margin-top-128">
<h1 class="text-dark-blue heading-48 margin-top-disabled margin-bottom-20">
Placement Header
</h1>
</div>
<div>
<div class="flex-display align-center featured-post-ct margin-top-300">
<div class="div-50 margin-r-32 ">
<img alt="" height="308px" width="472px" src="https://media.istockphoto.com/photos/modern-skyscrapers-in-business-district-picture-id1137991385?k=20&m=1137991385&s=612x612&w=0&h=dcSq5oF99RjNW0kQo-LtkUg-Wf15ofZRg87pBOVWLkk=" />
</div>
<div class="div-50">
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eget mi in rhoncus. Praesent dignissim libero a purus facilisis, eu blandit tortor mollis. Maecenas vitae justo ac tortor rhoncus congue.</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

You cannot see any child element inside a masked parent.
You should move your background elsewhere, and fortunately you can achieve that with CSS only using :before pseudo-element.
/* Not needed anymore */
/* .content-container-header {
height: 800px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
clip-path: ellipse(100% 95% at top);
background: radial-gradient(100% 95% at top, #000 100%, #0000);
} */
/* A pseudo element with your cropped background */
.content-container-header:before {
content: "";
display: block;
height: 800px;
width: 100%;
position: absolute;
z-index: -1;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
}
.flex-display {
display: flex;
}
.justify-center {
justify-content: center;
}
.margin-bottom-96 {
margin-bottom: 96px;
}
.header-content-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.container-1200 {
margin: 0 auto;
max-width: 1200px;
}
.margin-top-128 {
margin-top: 128px;
}
.margin-top-300 {
margin-top: 300px;
}
.align-center {
align-items: center;
}
.flex-display-col {
flex-direction: column;
}
.featured-post-ct {
width: 978px;
height: 308px;
background: #FFFFFF;
-webkit-box-shadow: 0px 8px 24px -4px rgb(150 166 198 / 18%), 0px 2px 6px -1px rgb(150 166 198 / 16%);
box-shadow: 0px 8px 24px -4px rgb(150 166 198 / 18%), 0px 2px 6px -1px rgb(150 166 198 / 16%);
border-radius: 8px;
}
.div-50 {
width: 50%;
}
.margin-r-32 {
margin-right: 32px;
}
.margin-bottom-8 {
margin-bottom: 8px;
}
<div class='content-container-header flex-display justify-center margin-bottom-96'>
<div class="container-1200 header-content-posts">
<div class="flex-display flex-display-col justify-center align-center margin-top-128">
<h1 class="text-dark-blue heading-48 margin-top-disabled margin-bottom-20">
Placement Header
</h1>
</div>
<div>
<div class="flex-display align-center featured-post-ct margin-top-300">
<div class="div-50 margin-r-32 ">
<img alt="" height="308px" width="472px" src="https://media.istockphoto.com/photos/modern-skyscrapers-in-business-district-picture-id1137991385?k=20&m=1137991385&s=612x612&w=0&h=dcSq5oF99RjNW0kQo-LtkUg-Wf15ofZRg87pBOVWLkk=" />
</div>
<div class="div-50">
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eget mi in rhoncus. Praesent dignissim libero a purus facilisis, eu blandit tortor mollis. Maecenas vitae justo ac tortor rhoncus congue.</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

To get around the mask on the main element you'll probably need to put that stuff outside it.
.content-container-header {
overflow: hidden;
height: 800px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
}
.flex-display {
display: flex;
}
.justify-center {
justify-content: center;
}
.margin-bottom-96 {
margin-bottom: 96px;
}
.header-content-posts {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.container-1200 {
margin: 0 auto;
max-width: 1200px;
}
.margin-top-128 {
margin-top: 128px;
}
.margin-top-300 {
/* margin-top: 300px; */
}
.align-center {
align-items: center;
}
.flex-display-col {
flex-direction: column;
}
.featured-post-ct {
width: 978px;
height: 308px;
background: #FFFFFF;
box-shadow: 0px 8px 24px -4px rgb(150 166 198 / 18%), 0px 2px 6px -1px rgb(150 166 198 / 16%);
border-radius: 8px;
}
.div-50 {
width: 50%;
}
.margin-r-32 {
margin-right: 32px;
}
.margin-bottom-8 {
margin-bottom: 8px;
}
.margin-top-neg-a-bunch {
margin-top: -240px;
}
.position-relative {
position: relative;
}
<div class='content-container-header flex-display justify-center margin-bottom-96'>
<div class="container-1200 header-content-posts">
<div class="flex-display flex-display-col justify-center align-center margin-top-128">
<h1 class="text-dark-blue heading-48 margin-top-disabled margin-bottom-20">
Placement Header
</h1>
</div>
</div>
</div>
<div class="margin-top-neg-a-bunch position-relative">
<div class="flex-display align-center featured-post-ct margin-top-300">
<div class="div-50 margin-r-32 position-relative">
<img alt="" height="308px" width="472px" src="https://via.placeholder.com/400" />
</div>
<div class="div-50">
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia eget mi in rhoncus. Praesent dignissim libero a purus facilisis, eu blandit tortor mollis. Maecenas vitae justo ac tortor rhoncus congue.</div>
</div>
</div>
</div>

Answer 3

The reason that the card is cut off is because you have overflow set to hidden on .content-container-header.
If you change this to:
.content-container-header {
overflow: visible;
height: 800px;
-webkit-mask: radial-gradient(100% 95% at top, #000 100%, #0000);
mask: radial-gradient(100% 95% at top, #000 100%, #0000);
background: linear-gradient(#f5fafd, #E8F3F9);
}
the issue should be resolved.