JSFiddle - React, Tailwind, and code Playground

by Rajesh Dixit

HTML

<div class="initials">
  <div class="bgImage"></div>
  <div class="content">A</div>
</div>

<div class="test"></div>

CSS

.content {
  z-index: 1;
  position: absolute;
  margin-top: 20px;
  padding-left: 20px;
  text-align: center
}

.initials {
  position: absolute;
  background: black;
  color: white;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  text-align: center;
  margin-left: 20px;
  font-size: 17px;
  letter-spacing: 5px;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, .15);
  overflow: hidden;
  white-space: nowrap;
}

.bgImage {
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  width: 100%;
  height: 60px;
  position: absolute;
  display: none;
  z-index: 0;
}

.test {
  background-image: url('');
  display: none;
}

JavaScript

(function() {
  setTimeout(function() {
    $(".bgImage").fadeIn(400);
  }, 3000);

  function loadImage() {
    var url = 'http://www.webgranth.com/wp-content/uploads/2013/04/Ceric6.gif';
    var img = $("<img />").attr('src', url)
      .on('load', function() {
      	$(".test").append(img).fadeIn(400);
      });
  }
  loadImage()
})()