JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align : center; ">
  <h1 data-title='TiPS' class='title'>TiPS</h1>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
body { margin: auto; }
*{
	font-family: 'Open Sans';
	margin: 0;
	padding: 0;
	color: #FFF;
	transition: all 0.5s;
}

body{
	background: url('image.jpg');
}

h1{
	margin-top: 15%;
  position: relative;
	font-size: 100px;
	text-align: center;
	text-shadow: 1px 1px 3px #000;
}

.title{
	position: relative;
	display: inline-block;
}

.title:before{
	position:absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 0;
	color:orangered;
	transition: width 0.5s;
	content: attr(data-title);

}

.title:hover:before{
	width:100%;
}