JSFiddle - React, Tailwind, and code Playground

by warmlaundry

HTML

<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />

<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />

CSS

#portfolioBottom {
    position:relative;
    top:-15px;
}
#portfolioTop {
    position:relative;
    top:6px;
}

JavaScript

var heightBottom;
var heightTop;
var interval;

function addHeight() {
    
    document.getElementById("portfolioBottom").style.width = "249px";
    heightBottom = parseInt(document.getElementById("portfolioBottom").style.height,10);
    heightBottom = heightBottom + 5;
document.getElementById("portfolioBottom").style.height = heightBottom + "px";
    
    document.getElementById("portfolioTop").style.width="210px";
    heightTop = parseInt(document.getElementById("portfolioTop").style.height);
    heightTop=heightTop + 5;
    document.getElementById("portfolioTop").style.height=heightTop + "px";
}