JSFiddle - React, Tailwind, and code Playground
HTML
<title>Taste of Brazil Market</title>
<body>
<div id="hover"></div>
<ul id="nav">
<li class="menu_item" id="menu_item_menu"><a href="#"> </a>
</li>
<li class="menu_item" id="menu_item_contact"><a href="contact.html"> </a>
</li>
<li class="menu_item" id="menu_item_location"><a href="location.html"> </a>
</li>
</ul>
<div id="coconut"><a href="#"> </a>
</div>
<ul id="footer">
<li class="footer_item"><a href="#">816-527-0400</a>
</li>
<li class="footer_item"><a href="#">|</a>
</li>
<li class="footer_item"><a href="#">[email protected]</a>
</li>
<li class="footer_item"><a href="#">|</a>
</li>
<li class="footer_item"><a href="#">25 E 3rd Street, KCMO 64106</a>
</li>
</ul>
</body>
CSS
body {
background-image:url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
background-position:top center;
background-repeat: no-repeat;
background-color:black;
height:800px;
width:800px;
}
#hover {
position:absolute;
width:450px;
height:400px;
top:300px;
right:20px;
}
.nohover {
background-image:url('http://s5.postimg.org/6qbplw2xj/Background_main.jpg');
}
.hover {
background-image:url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
#nav {
list-style: none;
position:fixed;
left: 0;
top:220px;
}
.menu_item {
padding-left:60px;
padding-top:3px;
margin:15px 15px 0 0;
width:254px;
height:30px;
opacity:0.8;
}
#nav li a {
text-decoration: none;
color:white;
display:block;
}
#menu_item_menu {
background:url(http://s5.postimg.org/5b5l6yoyf/Menu_Item_contact.jpg);
display:block;
}
#menu_item_contact {
background:url(http://s5.postimg.org/5b5l6yoyf/Menu_Item_contact.jpg);
}
#menu_item_location {
background:url(http://s5.postimg.org/5b5l6yoyf/Menu_Item_contact.jpg);
}
#footer {
list-style: none;
position:fixed;
right:50%;
top:835px;
font-size:14pt;
margin-right:-345px;
}
.footer_item {
display:inline-block;
padding:0 0px 0 30px;
}
#footer li a {
color:white;
text-decoration: none;
display:inline;
}
JavaScript
$('#hover').hover(function () {
$('body').removeClass('nohover').addClass('hover');
}, function () {
$('body').addClass('nohover').removeClass('hover');
});