JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<div class="aniOnImg">
  <img src="http://thedatasurgeon.net/images/Graphic-Template-Fixed-1000-Rounded.png" alt="DataSurgeon GUI">
  <div id="layer1" class="layerAni" style="left: 121px;">Simplify Data Extraction from<br>
  your data files with the<br>
  versatile and innovative software<br>
  <b>DataSurgeon</b></div>
</div>

CSS

.aniOnImg {
  position: relative;
  margin:0 auto;
  width: 1000px;
  height:503px;
  padding-bottom:41px;
  background:url(http://thedatasurgeon.net/images/slider-bg.png) 0 0 no-repeat;
  background-size: 99% auto;
}
.layerAni{
    display: none;
    position: absolute;
    top: 141px;
    left: -50px;
    color: #fff;
    font-size: 150%;
    text-align: center;
}

JavaScript

$('.layerAni')
	.css('opacity', 0)
  .show()
  .animate({ opacity: 1, left: '+=50px' }, 1250 );;