JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<section id="section-1">
  
  <div class="hover-link flexboxcenter">
    <div class="nav-1">
      <a href="#" class="hvr-underline-from-center nr-1">Old Desk</a>
      <a href="#" class="hvr-underline-from-center nr-2">Modern Desk</a>
    </div>
  </div>
  
  <div class="bg-1"></div>
  <div class="bg-2"></div>
  
</section>
  
</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);

/* General */

body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.flexboxcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1 {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
}

.hover-link {
  height: 500px;
  width: 100%;
  z-index: 100000;
}

.hover-link .nav-1 {
  z-index: 10000;
}

.hover-link .nav-1 a {
  text-align: center;
  display: block;
  font-family: 'Droid Serif', serif;
  text-decoration: none;
  color: black;
  font-size: 50px;
  letter-spacing: 1px;
  padding: 10px;
  transition: all 500ms ease-in-out;
}

/* Background classes */

.bg-1 {
  position: absolute;
  top: 0px;
  left: 0px;
	background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
  background-size: cover;
	height: 100vh;
	width: 100%;
	z-index: -1;
  opacity: 0.8;
	display: none;
}

.bg-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
  background-size: cover;
	height: 100vh;
	width: 100%;
	z-index: -1;
	opacity: 0.8;
	display: none;
}

/* Hover effect classes */

.new {
  color: #EE6F60 !important;
  opacity: 1 !important;
}

.bla {
  opacity: 0.3;
}

/* Hover Effect Underline From Center by Ian Lunn */

.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background:...

JavaScript

// A background image will fade in and out, when hovering over a link. 

$(".nr-1").hover(function() {
  $("#section-1").children(".bg-1").stop(true, true).fadeIn(500);
}, function() {
  $("#section-1").children(".bg-1").stop(true, true).fadeOut(500);
});

$(".nr-2").hover(function() {
  $("#section-1").children(".bg-2").stop(true, true).fadeIn(500);
}, function() {
  $("#section-1").children(".bg-2").stop(true,true).fadeOut(500);
});

// All the other links in the div should reduce opacity.

$(function() {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Effect: The link you hover, changes color.

$('.hover-link .nav-1 a').hover(function() {
    $(this).addClass("new");
  },
  function() {
    $(this).removeClass('new');
  });