<div>
  <img id="cat" src="http://placekitten.com/200/300" alt="">
</div>

<svg height="0">
  <mask id="mask">
    <rect width="100%" height="215" fill="url(#gradient)"/>
    <linearGradient x1="0" y1="0" x2="0" y2="1" id="gradient">
      <stop offset="50%" stop-color="black" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </mask>
</svg>

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

div {
  line-height: 0;
  margin: auto;
  width: max-content;
}

div:after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background-image: -moz-element(#cat);
  transform: rotate(180deg) scaleX(-1);
   mask: url('#mask');
}