JSFiddle - React, Tailwind, and code Playground

HTML

<!-- image -->
<div style="background-image: url (\"http://test.becover.it/img/testmask/iPhXnero2.png\"); height:650px;">&nbsp;</div><img src="http://rjzaworski.com/images/projects/mask/tangerines.jpg" /> + 
<img src="http://rjzaworski.com/images/projects/mask/mask.png" /> = 

<!-- maskable -->
<img src="http://rjzaworski.com/images/projects/mask/tangerines.jpg" class="maskable" />

CSS

body {
  color:#888;
  font:bold 13pt arial, sans-serif;    
}

img {
  margin:10px;
  vertical-align:middle;
}

JavaScript

// 
//  Example of jquery image masking
//  http://blog.rjzaworski.com/2011/03/masking-images-with-css-and-jquery/
//
(function($){

$.fn.maskable = function (opts) {

 var options = $.extend({
   maskSrc: '',
 }, opts);

 $(this).each(function () {
   var $img = $(this);
   $img.css('background', 'url(' + $img.attr('src') + ') center center no-repeat').attr('src', options.maskSrc);
 });
}
    
$('.maskable').maskable({maskSrc: 'http://rjzaworski.com/images/projects/mask/mask.png' });   

})(jQuery);