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
Table of Contents
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.
