JSFiddle - React, Tailwind, and code Playground

by tara_irvine

HTML

<script src="https://raw.github.com/jseidelin/pixastic/master/pixastic.core.js"></script>
<script src="https://raw.github.com/jseidelin/pixastic/master/actions/blend.js"></script>
<div class="image-container" id="render">
    <img src="http://filmmakeriq.com/wp-content/uploads/2012/06/beautyheadshot2.jpg" id="userImage" alt=""/>
    <div id="forehead25" class="time-effect years25">
        <img src="http://www.underwaterpistol.co.uk/img/forehead.png" alt=""/></div>
</div>

CSS

.time-effect{
    position:absolute;
    top:20px;
    z-index:100000;
    left:110px;
}
.image-container {
    position:relative;
    height:490px;
    width:664px;
    margin-top:0;
    color:#000;
    overflow:hidden;
    float:left;
}
#userImage{
    display:block;
    height:800px;
    margin-top:-50px;
}

JavaScript

var img = new Image();
img.onload = function() {
    var blendImg = new Image();
    blendImg.onload = function() {
        Pixastic.process(img, "blend", 
            {
                amount : 1, 
                mode : "multiply", 
                image : blendImg
            }
        );
    }
    blendImg.src ="http://www.underwaterpistol.co.uk/img/forehead.png";
}
    img.src = $("#userImage").attr("src");