JSFiddle - React, Tailwind, and code Playground

by ivanchaer

HTML

<article class="alpha-mask">
  <img class="alpha-target" src="https://i.stack.imgur.com/FwTzE.png" />
  <div class="overlay alpha-target">
  </div>
</article>

CSS

.alpha-mask {
  mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  -webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.overlay {
  background-color: #000;
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}