Related Articles

Related Articles

How to create Animated Blur Navbar using CSS?
  • Last Updated : 29 May, 2020

The Navbar is the main component of any website through which the user can navigate through all the components and sections of a site. That’s why it is really important to have a well-designed navigation bar or menu. So today we will be looking at a navbar in which all the elements get blur except the hovered-element.

Approach: The approach is to use blur() function and hover selector to blur all the elements except the hovered one.

HTML Code: Here, we have created a simple unordered list with 3 list-items.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Blured Menu Design</title>
</head>
<body>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact Us</li>
    </ul>
</body>
</html>

chevron_right


CSS Code: For CSS, follow these steps.

  • First we have applied some background and align over unordered list in the form of a navbar using flexbox.
  • Then we have used hover on ul with blur of 2 px which makes every list-item blur when we hover on ul.
  • Now we have used hover on li with blur set as 0 to unblur the hovered list-item.
  • Now, for those who don’t get the concept of it try to visualize two boxes. The smaller one representing li which is wrapped inside the bigger box which is representing ul. Now our first hover selection on ul makes the whole of the li blur as we haven’t till enter the smaller box boundary and as we enter the boundary of the smaller box we activate the hover selection of li which makes the hovered list-item unblurred.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    body{
            background: green;
            font-family:Arial, Helvetica, sans-serif;
      
        }
      
    ul{
        position: absolute;
        top:40%;
        left:40%;
        display: flex;
      
    }
      
    ul li{
        list-style: none;
          
        position: relative;
        display: block;
        margin: 10px;
    }
    ul:hover li{
        opacity: .2;
        filter: blur(2px);
    }
      
    ul li:hover{
        opacity: 1;
        filter:blur(0px);
    }

    chevron_right

    
    

    Complete Code: It is the combination of the above two codes.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
        <title>Blured Menu Design</title>
    <style>
        body{
            background: green;
            font-family:Arial, Helvetica, sans-serif;
      
        }
      
    ul{
        position: absolute;
        top:40%;
        left:40%;
        display: flex;
      
    }
      
    ul li{
        list-style: none;
          
        position: relative;
        display: block;
        margin: 10px;
    }
    ul:hover li{
        opacity: .2;
        filter: blur(2px);
    }
      
    ul li:hover{
        opacity: 1;
        filter:blur(0px);
    }
      
      
      
      
    </style>
      
      
    </head>
    <body>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact Us</li>
        </ul>
    </body>
    </html>

    chevron_right

    
    

    Output:

    full-stack-img




    My Personal Notes arrow_drop_up
Recommended Articles
Page :