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), … Read more