Fullscreen Navigation With Background Image Switching

A pretty cool fullscreen navigation that dynamically switches between background images when hovering over menu items.

Built with plain HTML/CSS and a little bit of JavaScript (jQuery).

How to use it:

1. Create a nav list and assign images to each menu items using the data-image attribute:

<ul class="navi">
  <li data-image="1.jpg">
    <a href="#" data-text="JQUERY">JQUERY</a>
  </li>
  <li data-image="2.jpg">
    <a href="#" data-text="SCRIPT">SCRIPT</a>
  </li>
  <li data-image="3.jpg">
    <a href="#" data-text="NET">NET</a>
  </li>
</ul>

2. Create an empty container to hold the background images.

<div class="photo"></div>

3. The required CSS styles for the navigation.

.navi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 100;
}

.navi li a {
  font-size: 4em;
  color: #fff;
  position: relative;
}

.navi li a:before {
  position: absolute;
  color: yellowgreen;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  content: attr(data-text);
  transition: 0.6s;
}

.navi li a:hover:before {
  width: 100%;
}

4. Apply CSS styles to the background images.

.photo {
  background-color: #ddd;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(initial.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transition: 0.5s;
}

5. The main JavaScript (jQuery script) to swich background images when hovering over menu items.

$('.navi li').mouseenter(function () {
  var changeImage = $(this).attr('data-image')
  $('.photo').css({
    'background-image': 'url(' + changeImage + ')'
  })
})
$('.navi li').mouseleave(function () {
  $('.photo').css({
    'background-image': ''
  })
})

---

This awesome jQuery plugin is developed by Amber-Kim. For more Advanced Usages, please check the demo page or visit the official website.