JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid big-square">
		<div class="infidus">
			<div id="infidus_info"><h4><i><u>&nbspMotion&nbsp</u></i></h4><br><h1><a href="infidus.html" class="link">'Infidus' Title Sequence</a></h1></div>
		</div>
    </div>

CSS

.infidus {
	margin-left: 0px;
	top: 0px;
    width:698px;
    height:300px;
    background: url("http://trevormsmith.com/img/infidus.jpg");
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-delay: .1s;
	transition-duration: 0.7s;
}

.infidus:hover {
	margin-top: 0px;
	top: 0px;
    width:698px;
    height:300px;
    background: url("http://trevormsmith.com/img/fade/infidus.png");
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-delay: .1s;
	transition-duration: 0.7s;
	
}

.infidus #infidus_info {
	line-height: 0px;
	text-align: center;
	color: #e89b65;
	margin-top: 120px;
	margin-left: 130px;
	position: absolute;
    opacity: 0;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
	transition-duration: .5s;
}

.infidus:hover #infidus_info {
	line-height: 0px;
	text-align: center;
	color: #e89b65;
	margin-top: 120px;
	margin-left: 130px;
	position: absolute;
    opacity: 1;
    -moz-transition-duration: 3s;
    -webkit-transition-delay: .2s; /* Safari */
    -webkit-transition-duration: 3s;
	transition-delay: .2s;
	transition-duration: 3s;
}



.grid{
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  background-color: #5D1C1D;
}

.big-square, .big-square2{
  top: 0px;
  height: 300px;
  width: 700px;
}