On Hover Full Screen Menu Change Background Image jQuery Plugin

On Hover Full Screen Menu Change Background Image jQuery Plugin has automatic switching feature which improves the user experience by smoothly shifting the background picture when the cursor hovers over each menu item. This produces a lively and appealing effect. By using HTML, CSS, and jQuery, you can design an eye-catching full-screen menu that changes the background picture dynamically when you hover over the menu items.
It produces a full-screen menu with menu items that respond to cursor hover by gracefully shifting the backdrop image when implemented. The parameter "background-size" guarantees that the image fills the entire background.

How To Use On Hover Full Screen Menu Change Background Image jQuery Plugin :

Add a Full screen Menu list and background images to the page.

  
  

    
    
    
      ...
  
  

    

      Earth
    
    

      Moon
    
    

      Mars
    
    
  

TThe CSS styles required for fullscreen navigation. To design your own styles, feel free to override the preset CSS variables.

:root {
  --pr-color: #fff;
  --second-color: #00000;
  --cubicbz: cubic-bezier(.9, 0, .1, 1);
}
 
* {
  box-sizing: border-box;
  font-weight: 800;
  margin: 0;
  padding: 0;
}
 
body {
  background: var(--second-color);
}
 
.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}
 
.menu-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .4;
  filter: blur(6px);
  overflow: hidden;
  transform: scale(1.1);
}
 
.menu-img img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  transition: .8s var(--cubicbz);
  transform: scale(1.2);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
 
.menu-img img.active {
  transform: scale(1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 
.menu__item {
  position: relative;
  list-style: none;
}
 
.menu__item+.menu__item {
  margin-top: 60px;
}
 
.menu__item::before {
  position: absolute;
  content: '';
  width: 60px;
  height: 60px;
  top: 50%;
  left: 0;
  transform: translate(-80px, -50%) rotate(225deg);
  opacity: 0;
  background: url(../img/arrow.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  will-change: transform;
  transition: .8s var(--cubicbz);
}
 
.menu__link {
  position: relative;
  display: block;
  text-transform: uppercase;
  font-size: 75px;
  line-height: .8;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke: 1px var(--pr-color);
  z-index: 2;
  transition: .8s var(--cubicbz);
}
 
.menu__item:hover .menu__link {
  transform: translateX(80px);
  color: var(--pr-color);
  -webkit-text-stroke: 1px transparent;
}
 
.menu__item:hover::before {
  opacity: 1;
  transform: translate(0%, -50%) rotate(180deg);
}

Initialize the Step wizard jQuery Plugin.

$('#devstocWizard').wizard();

Insert the most recent jQuery library before tag. Switch between backdrop graphics when hovering over menu items with this script.

$('.menu__item').on("mouseenter", function () {
  let id = $(this).data('id');
  $('#' + id + '-bg__img').addClass('active');
});
$('.menu__item').on("mouseleave", function () {
  $('.menu-img img').removeClass('active');
});