Day # 60: Line hover



Handling icons is one of the most frequent tasks any frontend developer must face. That’s why I strongly encourage any beginner to get their hands on lots of projects involving icons. They’re fun to work with and you can see the immediate effect of any modification you make.

For today’s project, I figured it’d be a cool idea to play around with an icon. What would happen if by hovering on that icon, this will get filled with color? 


To answer that question, you must focus on setting the before pseudo element, so you can have two icons on top of each other. One will be empty, which is the original, and the other will be the filled one.

And just like that, by setting a smooth transition, you get to fill the color of the icon!

Comments

Popular posts from this blog

Day # 19: Checkbox animation

Day # 12: Typewriter Effect

Day # 53: Icon text