Fullscreen Menu On Hover Change Background Image

Menu & Nav
Fullscreen Menu With Automatic Background Switching
File Size: 246.33 KB
Views Total: 659 views
Last Update:February 17, 2024
Publish Date: December 13, 2022
Official Website: Go to website
License: MIT
Plugin Author: DmitriNaumov
Demo    Download

Fullscreen Menu On Hover Change background Image with automatic switching, written in jQuery and CSS/CSS3, enhances the user experience by smoothly transitioning the background image as the cursor hovers over each menu item. This creates a dynamic and engaging effect. By combining these HTML, CSS, and jQuery , you can create a captivating full screen menu that dynamically changes the background image when hovering over the menu items.

When implemented, it creates a full screen menu with menu items that respond to cursor hover by smoothly transitioning the background image. The “background-size” property ensures that the image covers the entire background.

How To Use Fullscreen Menu

Add a Fullscreen Menu list and background images to the page.

<!-- Wrapper -->
<div class="wrapp">
  <!-- BG Images -->
  <div class="menu-img">
    <img id="1-bg__img" src="1.jpg" alt="1">
    <img id="2-bg__img" src="2.jpg" alt="2">
    <img id="3-bg__img" src="3.jpg" alt="3">
      ...
  </div>
  <!-- <a href="https://www.jquerypost.com/category/menu-nav/">Menu</a> Items -->
  <ul class="menu">
    <li class="menu__item" data-id="1">
      <a href="#" class="menu__link">jQuery</a>
    </li>
    <li class="menu__item" data-id="2">
      <a href="#" class="menu__link">Script</a>
    </li>
    <li class="menu__item" data-id="3">
      <a href="#" class="menu__link">Net</a>
    </li>
   
  </ul>
</div>

The necessary CSS styles for the fullscreen navigation. Feel free to override the default CSS variables to create your own styles.

:root {
  --pr-color: #fff;
  --second-color: #0a0a0a;
  --cubicbz: cubic-bezier(.9, 0, .1, 1);
}

* {
  box-sizing: border-box;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

body {
  background: var(--second-color);
}

.wrapp {
  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);
}

Add the latest jQuery library (slim build) into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

 Script for Switch between background images when hovering over menu items.

$('.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');
});

Done

Thanks for make jQuery plugin is developed by DmitriNaumov For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins