JSFiddle - React, Tailwind, and code Playground

by Philip Warkentien II

HTML

<div class="wrapper">
  <img class="img" id="img-fade" src="http://stuffpoint.com/dogs/image/461366-dogs-happy-dog.jpg">
  <p>image should gradually fade-in</p>
</div>

CSS

body {
  overflow: hidden;
}
.wrapper {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img {
  width: 30vw;
}
#img-fade {
  opacity: 0;
}

JavaScript

var imgFade = document.getElementById('img-fade');
for(i = 0; i < 100; i++){
  (function(step) {
    setTimeout(function() {
      imgFade.style.opacity = (step/100);
    }, 20);
  })(i);
}