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.
HTML Code: Here, we have created a simple unordered list with 3 list-items.
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.
- How to Create Animated Background using CSS3 ?
- How to create an Affix or sticky Navbar ?
- How to Create Animated Loader Ring using HTML and CSS?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- jQuery | animated Selector with Example
- How to align navbar items to the right in Bootstrap 4 ?
- How to set sticky navbar only for first section of page?
- How to Set navbar active class with Bootstrap and AngularJS ?
- How to Align Navbar Items to Center using Bootstrap 4 ?
- How to design full width dropdown Navbar using Bootstrap ?
- How to Align navbar logo to the left screen using Bootstrap ?
- CSS | blur() Function
- Nodejs | GM blur() Function
- HTML | DOM blur() Method
- AngularJS | ng-blur Directive
- Node Jimp | Blur
- Convert an image into Blur using HTML/CSS
- How to make a glass/blur effect overlay using HTML and CSS ?
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.
Complete Code: It is the combination of the above two codes.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.