<div class="wrap">
  <div class="slider">
    <div class="slide-1"><img src="https://wpapers.ru/wallpapers/games/NFS/10673/1280x800_NFS-Pro-Street-HD.jpg" alt=""></div>
    <div class="slide-2"><img src="https://images.hdqwalls.com/download/nfs-heat-2019-vm-1280x800.jpg" alt=""></div>
  </div>
  <div class="buttons">
    <a class="go-slide-2" href="#">Slide 2</a>
  </div>
</div>

body {
  margin: 0;
}

/* Magic */
.slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.wrap img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.slider > div {
  width: 100%;
  position: absolute;
  z-index: 1;
}
.slider > div:not(:first-child) {
  display: none;
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 9;
}
.buttons a {
  margin: 0 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 30px;
  text-decoration: none;
  color: #333;
}

$(".go-slide-2").hover(function () {
  if ($(".go-slide-2").is(":hover")) {
    $(".slide-1").fadeOut();
    $(".slide-2").fadeIn();
  } else {
    $(".slide-2").fadeOut();
    $(".slide-1").fadeIn();
  }
});