how to create a fullscreen overlay menu? - html

Question

I am trying to make a full-screen menu with two sides, one side has a list of items; Home, Services, Portfolio and the other side will show an image on item hover. For example, if mouse hover on Services, a new image shows up and so.
This is what I need:
But, this is what I have so far:
Another example of what I'm trying to do is this website
Any help pleaseee??
Thanks,
PS: Hide the image in mobile.
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: $dkgreen;
background-color: $dkgreen;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
/* top: 25%;*/
width: 100%;
text-align: center;
* margin-top: 30px;
*/
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
z-index: 1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<nav class=" navbar navbar-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="./img/maduro-logo.png" class="img-fluid" width="115" /></a>
<button class="navbar-toggler custom-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div id="myNav" class="overlay">
<div class="row overlay-content">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<div class="col-sm-5">
<a style="color: #fff;" id="" class="" href="index.php">Home</a>
<a style="color: #fff;" id="" class="" href="services.php">Services</a>
<a style="color: #fff;" id="" class="" href="portfolio.php">Portfolio</a>
<a style="color: #fff;" id="" class="" href="clients.php">Clients</a>
<a style="color: #fff;" id="" class="" href="contact.php">Contact</a>
</div>
<div class="col-sm-7">
<img class="img-fluid" src="img/a.jpg">
</div>
</div>
</div>
Edit:

Answer 1

$('#home').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
$('#services').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
});
});
$('#portfolio').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
$('#clients').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.starwebcreations.com/new_images/services.jpg')"
});
});
$('#contact').hover(function() {
$('.change-img').css({
"background-image": "url('https://www.ryanhomes.com/rh-community-gallery-NewAspectRatio/7ac519ed-9b29-47b0-a489-ded2da8b770f/db/7ac519ed-9b29-47b0-a489-ded2da8b770f.jpg')"
});
});
.side-bar {
width: 50vw;
background-color: #ddd;
height: 100vh;
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
.side-bar>ul {
list-style-type: none;
}
.side-bar>ul>li {
text-align: center;
padding: 15px 0;
cursor: pointer;
}
.img-sec {
width: 50vw;
background-color: #333;
height: 100vh;
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
.change-img {
width: 100%;
max-height: 100%;
background-size: cover;
background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="side-bar">
<ul>
<li id="home">Home</li>
<li id="services">Services</li>
<li id="portfolio">Portfolio</li>
<li id="clients">Clients</li>
<li id="contact">Contacts</li>
</ul>
</div>
<div class="img-sec">
<div class="change-img"></div>
</div>
</div>