How to create Animated Blur Navbar using CSS? - GeeksforGeeks

30 Sep, 2021
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.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, initial-scale=1.0">    <title>Blurred Menu Design</title></head><body>    <ul>        <li>Home</li>        <li>About</li>        <li>Contact Us</li>    </ul></body></html>
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.
CSS
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);}
Complete Code: It is the combination of the above two codes.
HTML
<!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>
Output:
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
arorakashish0911
CSS-Functions
CSS-Misc
CSS-Selectors
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)