How to add multiple layers of overlays with transparency to an image using CSS-CodePudding

How can I push down the triangle and include the content on top of the white circles? I'm trying to find a solution for creating a hero section that contains a background image with the three overlay shapes included as part of the image. On top of the overlays will be an h1, p and btn. I included a screenshot below on what the design is supposed to look like.

There are these three overlays:

Straight angled shape with 0% transparency at bottom.
Outer circle with transparency.
Inner circle with transparency.

Here's what I have so far. I included a snippet below and also have a working version on

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
svg {
  width: 628;
  height: 628:
}
.element {  
  position: relative;
  width: 100%;
  min-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
}
.element:before{
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%;0
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.circle-outer {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 420;
  w: 628;
  h: 628;
}
.circle-inner {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 400;
}
.hero-triangle {
  content: '';
  position: relative; 
  width: 100%;
  height: 100px;
  background: #fff;
  -webkit-clip-path: polygon(0 8%, 0% 100%, 100% 100%);
  clip-path: polygon(0 80%, 0% 100%, 100% 100%);
  z-index: 99;
}

<div >
  <div >
    <div >
    <h1>This belongs in circle</h1>
    <p>This belongs in circle too.</p>
    <button >Learn more</button>
    </div>
    <svg viewbox width="1000" height="580" viewBox="0 0 100 100">
      <circle  />
      <circle  />
      <polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
    </svg>
  </div>
</div>
<div >
  <h4>Body content must be positioned right underneath hero image for all widths.</h4>

CodePudding user response：

I don't have time for an explanation right now, but something like this:

* {
  padding: 0;
  margin: 0;
}

.element {
  position: relative;
  width: 100%;
  min-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);
}

.hero-content {
  position: absolute;
  left: -50px;
  bottom: -200px;
  border-radius: 50%;
  border: solid rgba(255, 255, 255, .2) 1em;
}

.hero-content>div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  text-align: center;
  padding: 5em;
  background-color: rgba(255, 255, 255, .5);
}

<div >
  <div >
    <div >
      <div>
        <h1>This belongs in circle</h1>
        <p>This belongs in circle too.</p>
        <button >Learn more</button>
      </div>
    </div>
  </div>
</div>
<div >
  <h4>Body content must be positioned right underneath hero image for all widths.</h4>
</div>

CodePudding user response：

As the circles are just decorative rather than adding meaning there is no need for them to be elements. It will be sufficient for them to be background-images.

Here is a simple snippet which places the content element and gives it two acckground-images, both with some transparency, making them circles using radial-gradients.

.element {
  position: relative;
  width: 100%;
  rmin-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
  clip-path: polygon(0 0, 0 80%, 100% 100%, 100% 0);
  aspect-ratio: 1296 / 728;
}

.hero-content {
  position: absolute;
  left: -12.5%;
  top: 50%;
  width: 70%;
  padding-top: 5%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, transparent 65% 100%), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  rjustify-content: center;
  flex-direction: column;
}

.hero-content h1 {
  font-size: 2vw;
}

.hero-content p {
  font-size: 1vw;
}

.hero-content button {
  font-size: 1vw;
}

<div >
  <div >
    <div >
      <h1>This belongs in circle</h1>
      <p>This belongs in circle too.</p>
      <button >Learn more</button>
    </div>
    <!--<svg viewbox width="1000" height="580" viewBox="0 0 100 100">
      <circle  />
      <circle  />
      <polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
    </svg>
    -->
  </div>
</div>
<div >
  <h4>Body content must be positioned right

Note: obviously you will want to change the settings for type sizes to suit your particular use case. I just made them relative to the viewport so that it is responsive.

Also, there is some confusion I think between whether it is essential for the hero to cover the full width or for the min height to be set. Of course revert to that if that is what is required, the circles will just be in a different place relative to the apples and some of the image may disappear.

CodePudding user response：

The z-index of the triangle is 99, meaning it will be on top all other content in the page that has no z-index or z-index greater than 99. So just set the z-index to -1. And besides, there's nothing like hero-triagle in your html, it's not the hero-triagle that's affecting your code, if I'm seeing the right thing here, it's the clip-path in the element, comments it out and see the changes.