Search code examples
overlayz-indexopacitysidebar

Is there a way to stop the images show on top of the opacity overlay?

I'm new to HTML/CSS. I created this sidebar that when clicked, it will slide from the left side, and while it slides, an opacity background will show. Unfortunately, the images show on top of the opacity overlay and I can't find the problem to make it stop showing on top of the opacity so brightly. I'm doing this for a project asked by our subject teacher.

enter image description here

I've already tried using z-index but I'm not really an expert here since I'm a beginner and I get help from websites like w3schools.com

 <style>
    body {
    margin: 0;
    font-size: 32px;
    font-family: Arial, Helvetica, sans-serif;
 }

.header {
  background-color: #fffff;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  padding: 16px 14px;
  background-color: #72cef6;
  z-index: 90;
}

}

#navbar a:hover {
  background-color: #ccebff;
  color: #666666 
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div id="navbar">
<style>
body {
    font-family: "Calibri", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 18px;
    color: #ff9966;
    display: block;
    transition: 0.4s;
}
.sidenav a:hover {
    color: #99d6ff;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 22px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="Moderator's Profile.html">Modertor's Page</a> 
  <a href="#">Members and Officers</a> 
  <a href="Constitution and By Laws.html">Constitution and By Laws</a> 
  <a href="#">Activity Layout</a>
  <a href="about.html">Info.</a> 
</div>

<span style="font-size:18px;cursor:pointer" onclick="openNav()"><font 

color="#72cef6">___</font><img src="menu.png" height="24"></span>


<style>
element.style {
    display: block;
}

.mm-open .mm-fullscreen-bg {
    cursor: pointer;
    background-color: rgba(0,0,0,0.55);
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}
</style>

<div class="mm-fullscreen-bg" style="display: block;"></div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width 
="250px";document.body.style.backgroundColor = 
"rgba(0,0,0,0.4)";object.style.zIndex="999";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = 
"0";document.body.style.backgroundColor 

= "white";
}
</script>
</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

I just want to achieve the results of this..

Oh, and don't mind the links provided on the sidenav.

Solution

  • I assume your using this example on w3schools

    So you can achieve this give your img tag an id let say some-image

    <img id='some-image' src="https://via.placeholder.com/150">

    than add this to openNav();

    document.getElementById('some-image').style.opacity = "0.2";

    When your closing you can revert back to white on closeNav()

    document.getElementById('some-image').style.opacity = "1";

    I created jsfiddle example for you please check

    https://jsfiddle.net/whatatimetobealive/4wack0y1/11/

    If you provide all your code I can help you on that too but currently body section is missing so its hard to assume what exactly do you have there.

    Hope it helps...