CODEWITHSUNDEEP
htmlcss
Mohamad
Mohamad

Reputation: 608

Display overlay on hover using only css without javascript

I am trying to make a full page overlay when I hover on my navbar menu ul

the overlay div is on the top of the page

When I hover on the ul the li links appear but the overlay doesn't. How can I make appear the overlay using CSS only can anybody help?

This is the HTML and CSS code the full code of the header whith the span icons, ul and li. My intention is that when I hover on the ul the li links appear like in the code below and the overlay appear now only the li links appear

.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}
  <div class="overlay"></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

Upvotes: 3

Views: 1345

Answers (4)

user16639239
user16639239

Reputation:

You can use a little bit Javascript and boom it's makes your navbar so attractive.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.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;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
</style>
</head>
<body>

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>


<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

function closeNav() {
  document.getElementById("myNav").style.display = "none";
}
</script>
     
</body>
</html>

Explation of JS used:

onclick() is used here to call the function openNav by default set it's display:none; and then make display:block when someone calling openNav() fucntion.

Let me know if this will help you..

Upvotes: 1

user16487855
user16487855

Reputation:

You're gonna have to use at least a little bit of javascript for this mate. Do something like this:

    let icon = document.getElementsByClassName('icon')[0];
    let offCanvas = document.getElementsByClassName('offCanvas')[0];
    let overlay = document.getElementsByClassName('overlay')[0];

    icon.onmouseenter= () => {
        overlay.style.display = "block";
        overlay.style.opacity = "0";
        overlay.style.animation = "overlay .5s forwards";
    }

    icon.onmouseleave = () => {
        overlay.style.animation = "overlayHide .5s forwards";
    }
.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    z-index: 10;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}

.icon {
    height: 25px;
    width: 25px;
    background-color: black;
}

@keyframes overlay {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes overlayHide {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
  <div class="overlay"></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <div class="offCanvas">
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76444

You need Javascript for this purpose, unfortunately, as far as I know. I have created an inner overlay div and two JS events to cope with the situation.

document.querySelector(".links").addEventListener("mouseenter", function() {
    let overlay = document.querySelector(".overlay");
    overlay.style.display = "block";
    let overlayContent = overlay.querySelector(".overlay-content");
    overlayContent.style.width = document.body.clientWidth + "px";
    overlayContent.style.height = document.body.clientHeight + "px";
});

document.querySelector(".links").addEventListener("mouseleave", function() {
    let overlay = document.querySelector(".overlay");
    overlay.style.display = "none";
});
.header .container .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container .row img {
    max-width: 207px;
    max-height: 207px;
}

.header .container .row .links {
    position: relative;
    z-index: 1;
}

.header .container .row .links .icon {
    width: 1.875em;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor: pointer;
}

.header .container .row .links .icon span {
    background-color: var(--whiteColor);
    margin-bottom: 0.3125em;
    height: 0.125em;
    background-color: #000;
}

.header .container .row .links .icon span:first-child {
    width: 100%;

}

.header .container .row .links .icon span:nth-child(2) {

    width: 100%;
}

.header .container .row .links .icon span:last-child {
    width: 60%;
    transition: 0.3s
}

.header .container .row .links:hover .icon span:last-child {
    width: 100%;
}

.header .container .row .links ul {
    display: none;
    background-color: #000;
    position: absolute;
    min-width: 12.5em;
    right: 0;
    top: calc(100% + 15px);
    z-index: 1;
}

.header .container .row .links ul::before {
    content: " ";
    position: absolute;
    border-width: 0.625em;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    right: 0.3125em;
    top: -1.25em;
}

.header .container .row ul li {
    padding: 1em;
}

.header .container .row ul li a {
    text-transform: capitalize;
    color: var(--whiteColor);
    transition: color .3s ease-in-out;
}

.header .container .row ul li a:hover {
    color: var(--grayColor);
}

.header .container .row .links:hover ul,
.header .container .row .links:hover .overlay{
    display: block;
}

.overlay {
    display: none;
    position: relative;
    z-index: -1;
}

.overlay-content {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0.8em;
    padding-left: 0.8em;
}
    <div class="overlay"><div class="overlay-content"></div></div>
    <header class="header">
        <div class="container">
            <div class="row">
                <img src="https://images01.nicepage.com/51/41/51417a6d3ee82530e9117219a42fd762.png">
                <div class="links">
                    <span class="icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </span>
                    <ul>
                        <li><a href="#">home</a></li>
                        <li><a href="#">menu</a></li>
                        <li><a href="#">catering</a></li>
                        <li><a href="#">our menu</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 517

AFAIK you cannot change parent element on child hover using pure CSS you have to use use javascript to achieve it...

Upvotes: 0

Related Questions