JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">
    
<div class='bla'>
<img src="http://griffusion.elementfx.com/mythnest/art/breed1/base/024.png">
<img class='overlay' src="http://griffusion.elementfx.com/mythnest/art/breed1/overlay.png">
<img class='mult' src="http://griffusion.elementfx.com/mythnest/art/breed1/shade.png">
<img class='overlay hl' src="http://griffusion.elementfx.com/mythnest/art/breed1/highlight.png">
<img src="http://griffusion.elementfx.com/mythnest/art/breed1/line.png">
</div>
</div>

CSS

#slider {width : 200px;}

.bla {position:relative;height:300px;width:400px;border:1px solid red;}
.bla div,.bla img {width:100%;height:100%;position:absolute;top:0px;left:0px;}

.overlay {mix-blend-mode:overlay;}
.multiply {mix-blend-mode:multiply;}
.hl {opacity:0.5;}

JavaScript

var originalW = $(".bla").width();
var originalH = $(".bla").height();

$("#infoSlider").text(originalW + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100);
            var newW = originalW * fraction;
            var newH = originalH * fraction;
  
        $("#infoSlider").text(newW+' x '+newH + ', ' + Math.floor(fraction * 100) + '%');

        $(".bla").width(newW).height(newH);
    }
});