JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
     <li id="home"><a href="#home">Home</a></li>
     <li id="item1"><a href="#contact">Contact</a></li>
      
    </ul>
  </div>

CSS

#nav {
	font: 14px 'LeagueGothicRegular', Arial, sans-serif;
	color: #f9f8cc;
	width:300px;
	clear: both;
	height: 58px;
	margin: 5px 0px 0px 50px;
	background:#c2c2c2;
	opacity:.8;
}

#nav ul {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style-type: none;
	background-image: none;
	color: #FDE99D;
	float: left;
	height:48px; width:85px;
	border-right:1px #333333 solid;
	text-align:center;
	padding-top:10px;
	
	-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

#nav li a {
	color: #000;
	text-shadow: 0px 2px 2px #222;
	text-transform: uppercase;
}

#nav li:hover a {
	color: #999;
	color:transparent !important;
	text-shadow: none;
	
}

#nav li:hover {
	color:transparent !important;
	text-shadow: none;
	background-color: rgba(255, 0, 0, .5);
	
	-webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
#home:hover {background:url(http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png) no-repeat;}
#item1:hover {background:url(http://cdn3.iconfinder.com/data/icons/picons-social/57/16-apple-48.png) no-repeat;}