0

Using CSS3 I am applying a mask to a full width image where the mask is:

enter image description here

The HTML is:

<div class="mask">
  <img src="/photograph.jpg" />
</div>

And the CSS is:

div.mask {
  clip-path: path("M97.334,22.095C145.038,35.826 185.29,39.814 173.036,97.797C164.397,138.676 139.115,173.499 97.334,173.499C55.553,173.499 32.012,138.269 21.632,97.797C4.332,30.339 39.904,5.566 97.334,22.095Z");
}
div.mask img {
  width: 100%;
}

This mask is only 160x160px.

Then I tried to apply a mask with 2800px width to fill all screen:

enter image description here

But when I run it my image disappears instead of being masked.

Am I missing something?

Miguel Moura
  • 36,732
  • 85
  • 259
  • 481
  • transform the path into an SVG that you use inside mask like shown in the duplicate then you can easily control the size – Temani Afif Mar 17 '23 at 15:12

0 Answers0