How to create Animated Blur Navbar using CSS?
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
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.
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.