JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div>
    <img style="mask: url(#alphamask); -webkit-mask: url(https://s3.amazonaws.com/plic-elements-staging/test/mask-image.png); -webkit-mask-size: cover; -webkit-mask-type: alpha;" src="https://daneren.com:8081/css/images/image-placeholder.png" />
</div>
<!--<div>
    <img style="-webkit-mask-image: url(https://s3.amazonaws.com/plic-elements-staging/test/mask-image.png); -webkit-mask-size: cover;" src="https://daneren.com:8081/css/images/image-placeholder.png" />
</div>
<div>
    <img style="-webkit-mask-box-image: url(https://s3.amazonaws.com/plic-elements-staging/test/mask-image.png); mask-border: url(https://s3.amazonaws.com/plic-elements-staging/test/mask-image.png);" src="https://daneren.com:8081/css/images/image-placeholder.png" />
</div>-->

<svg width="150" height="150">
    <image width="150" height="150" xlink:href="https://daneren.com:8081/css/images/image-placeholder.png" style="mask: url(#alphamask)" />
</svg>

<svg width="0" height="0">
  <defs>
    <filter id="maskfilter">
      <feColorMatrix in="SourceAlpha"
                   type="matrix"
                   values="0 0 0 1 0
                           0 0 0 1 0
                           0 0 0 1 0
                           0 0 0 1 0" />
    </filter>

    <mask id="alphamask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <image xlink:href="https://s3.amazonaws.com/plic-elements-staging/test/mask-image.png" filter="url(#maskfilter)" width="1" height="1" />
    </mask>
  </defs>
</svg>




<p/>




<div>
    <img style="mask: url(#lummask); -webkit-mask: url(https://s3.amazonaws.com/plic-elements-staging/test/sc-edge001.jpg); -webkit-mask-type: luminance;" src="https://daneren.com:8081/css/images/image-placeholder.png" />
</div>

<svg width="150" height="150">
    <image width="150" height="150" xlink:href="https://daneren.com:8081/css/images/image-placeholder.png" style="mask: url(#lummask);" />
</svg>

<svg width="0" height="0">
  <defs>
    <mask id="lummask"...

CSS

div {
    width: 150px;
    height: 150px;
    display: inline-block;
}

img {
    width: 100%;
    height: 100%;
}