JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrap">
  <div class="img-place"></div>
  <div class="nav">
    <ul>
      <li class="ex1">HELLO</li>
      <li class="ex2">THERE</li>
      <li><br></li>
      <li><br></li>

      <li><a href="#1" data-target="bg1">TEST1</a></li>
      <li><a href="#2" data-target="bg2">TEST2</a></li>
      <li><a href="#3" data-target="bg3">TEST3</a></li>
    </ul>
  </div>
</div>

CSS

li.ex1 {
        font-family: 'HelveticaNeue';
        position: relative;
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 74px;
        text-transform: uppercase;
        font-weight: "Thin";
        letter-spacing: 0px;
        margin: -20px;
        padding: 0px 0px 0px 77px;
        transition: all 0.5s ease-in-out;
      }
      
      li.ex2 {
        font-family: 'HelveticaNeue';
        position: relative;
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 74px;
        text-transform: uppercase;
        font-weight: "Thin";
        letter-spacing: 0px;
        margin: -12px;
        padding: 0px 0px 0px 70px;
        transition: all 0.5s ease-in-out;
      }
      
      .nav-wrap {
        width: 100%;
        height: 770px;
        background: #111;
        position: relative;
      }
      
      .nav-wrap .img-place {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        z-index: 5;
      }
      
      .nav-wrap .nav li {
        font-family: 'HelveticaNeue';
        position: relative;
        z-index: 6;
        list-style: none;
      }
      
      .nav-wrap .nav li a {
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 48px;
        text-transform: uppercase;
        font-weight: "Thin";
        letter-spacing: 0px;
        margin: -12px;
        padding: 0px 0px 0px 70px;
        transition: all 0.5s ease-in-out;
      }
      
      .nav-wrap .nav:hover li a {
        opacity: 0.3;
      }
      
      .nav-wrap .nav li a:hover {
        opacity: 1;
        padding-left: 95px;
        font-weight: 600;
      }
      
      .nav-wrap .bg1 {
        background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
        background-size: 120%;
        opacity:...

JavaScript

$('.nav li a').hover(function() {
  $('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());