Masking Image with CSS

masking image with CSS

You only need to consider one image which is the bottom part of your mask then use a simple gradient for the other part. You also don't need mask-composite. Simply adjust the size/position so that both mask don't overlap:

.img-poster {  display: block;  max-width: 100%;  -webkit-mask:       linear-gradient(#fff,#fff)              top,     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;  -webkit-mask-size:     100% calc(100% - 30px),     auto 30px;  -webkit-mask-repeat: repeat-x;  mask:       linear-gradient(#fff,#fff)              top,     url(https://i.ibb.co/5WvbqgG/zmylJ.png) bottom;  mask-size:     100% calc(100% - 30px),     auto 30px;  mask-repeat: repeat-x;}

<section class="section poster-container">  <img src="https://imagejournal.org/wp-content/uploads/bb-plugin/cache/23466317216_b99485ba14_o-panorama.jpg" alt="Sample Image" class="img-poster add img-responsive"></section>

Negative mask in CSS within the background image

New Answer

Based on the update you can do the following. The idea is to consider an inverted version of your logo where you make the transparent part non-transparent (and the non-transparent part transparent) then you apply multiple mask layer to get what you want.

I kept the same idea from the old answer. I am considering the logo at the center of the overlay:

.overlay {  --h:200px; /* height of the logo*/  --w:200px; /* width of the logo */
  height:300px;  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;   -webkit-mask:      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),      linear-gradient(#fff,#fff) left  /calc(50.1% - var(--w)/2) 100%,      linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);  mask:      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;}
body {  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;}

<div class="overlay"></div>

mask part of image in css

You can try this way putting a border-radius on the image itself. remove unnecessary css and just combine them in one ID. Let me know

.manbox {
  width: 100%;
  padding-left:100px;

}

#circle {
  background: #660099;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  margin-top:50px;
  position:absolute;
 
}

#mytext {
  font-size: 20px;
  height: auto;
  background-color: white;
  max-width: 200px;
  border-radius:20px;
  position:absolute;
  bottom: 50px;
  left: -50px;
  text-align: center;
  padding: 8px;
 box-shadow: 0px 0px 6px 2px gray;
}

#mytext1 {
  font-size:20px;
  height: auto;
  background-color:white;
  max-width:200px;
  border-radius:20px;
  position:absolute;
  bottom:100px;
  right:-50px;
  text-align:center;
  padding:8px;
  box-shadow: 0px 0px 6px 2px gray;
}


#smallcircle {
  background: #660099;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  float:right;
}

#mediumcircle {
  background: #660099;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  float:right;
  margin-top:-40px;
}




#circle>img {
  border-radius:50%;  
  object-fit:contain;
  width:100%;
  height:330px;
  margin-top:-29px;
  
}

<div class="manbox">
  <div id="circle">
          
       <div id="mytext">here for all your text</div>
       <div id="mytext1">here for all your text</div>
       
       <img src="https://i.ibb.co/cJvFkv3/man.png" alt="Sample Image">    

       <div id="mediumcircle"></div>
       <div id="smallcircle"></div>

  </div>
</div>

Applying multiple mask-image to a single div

You need to play with the size and position. mask work the same way as background-image so simply imagine your self making two images on the same element (one on the top and the other on the bottom)

div {
  width: 200px;
  height: 200px;
  background-color: green;
  border: 2px solid black;
  -webkit-mask: 
     radial-gradient( circle at center top,    transparent 30px, black 31px) top, 
     radial-gradient( circle at center bottom, transparent 30px, black 31px) bottom;
  -webkit-mask-size:100% 51%; /* each one half the size */
  -webkit-mask-repeat:no-repeat; /* don't forget this */
}

<div></div>

CSS mask-image, is possible to show an element on top of the mask (without absolute positioning)?

How about applying applying the background-color and the mask to .mask-wave::before and then absolute position and z-index the pseudo element behind your div. Then you can have your masked shape with background colour behind text or whatever.

Seems to be a duplicate of this How to apply a mask-image only on an element's background and not on its children?

Is it possible to animate a CSS mask-image?

Not sure what kind of animation you want to perform but since it's a simple gradient no need to consider an image. Simply define the gradient and then you must define the size in order to correctly animate it.

Here is a basic example

.header-image figure {
  -webkit-mask-image: linear-gradient(90deg, #0000, #fff, #0000);
          mask-image: linear-gradient(90deg, #0000, #fff, #0000);
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  animation: clip-fade 3s infinite alternate;
}

img {
  max-width: 100%;
}

@keyframes clip-fade {
  100% {
    -webkit-mask-position: right;
            mask-position: right;
  }
}

body {
  background: red;
}

<div class="header-image">
  <figure>
    <img src="https://i.stack.imgur.com/lkGW7.png" />
  </figure>
</div>

Masking Image with CSS