JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<img class="top" src="https://d33wubrfki0l68.cloudfront.net/175114938be87ad0c1170d95e2fdaa616846eb49/d40da/images/css/masking/masking-example1.jpg">
<img class="bottom" src="http://i.imgur.com/jFpQF6g.jpg?s=32&g=1">

CSS

body {
  margin:0;
  padding: 0;
}

img {
  position: absolute;
  width: 320px;
}

.top {
  
}

.bottom {
  top: 150px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 50%);
  mask-image: linear-gradient(to bottom, transparent 10%, black 50%);
}