CSS Positioning card outside of header container-CodePudding

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 >
    <div >
      <h1 >
        Placement Header
      </h1>

    </div>
    <div>
      <div >
        <div >
          <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 >
          <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>

CodePudding user response：

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 >
<div >
  <h1 >
    Placement Header
  </h1>

</div>
<div>
  <div >
    <div >
      <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 >
      <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>

CodePudding user response：

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 >
    <div >
      <h1 >
        Placement Header
      </h1>

    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <img alt="" height="308px" width="472px" src="https://via.placeholder.com/400" />
    </div>

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

CodePudding user response：

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.