Links Hover Effect using tailwindcss

this effect basically moves around the idea on how to showcase links in navigationbars or any sections profissionally and visually perfect, the effect tends on opacity but do not worry you can adjust the code as you want to achieve the best result

The Structure

what do we have here is basic array of Links styled and organized using tailwindcss for now nothing special yet

BlockQuote

You can use any form of icons from any library, for this example i am using lucide-react, for your example feel free to be creative

Continue on logic

by adding "use client" and importing use state, we can actually track the changes of links properties, added onMouseLeave function to the parent div that set Hover back to "all" , and added onMouseEnter in each link is mapped through, with setHover(item.link) so we can know which is link is being hovered over in the current moment

The dynamic tailwindcss classes

Finnaly we add the dynamic classes , so when you mouse leave the parent div, all of links go back to original unhovered state where they all opacity-100% and no blur, when you hover a link, that link get scaled and other links get blurred and fade

Conclusion

i used this type of links all throughout my portfolio because it's so much appealing and yet simple, modern, and eye catching, thank you and i hope you enjoyed the tutorial <3