Animated Icons

Hi!

I just bought GP premium and looking forward to creating... However my coding experience is extremely limited and I'm really just learning as I go.

In short, I'm looking to add animated-on-hover icons to my website which link to category pages upon clicking.

I've found some CSS code that should be able to help me do this. More specifically here: (https://github.com/l-lin/font-awesome-animation/blob/master/dist/font-awesome-animation.css)

and through this website: (https://tympanus.net/Development/IconHoverEffects/)
CSS code on Github: (https://github.com/codrops/IconHoverEffects/blob/master/css/component.css)

I've installed the Simple CSS plugin as I understand that this prevents me from messing with any parent theme coding.

I tried to copy and paste for instance the font awesome animation code (upper link). However I don't quite understand how I can put the results into effect on specific icons that I've added to a specific blog post for example.

I guess my question is how I can enable certain CSS code to function with specific content on my website.

Sidenote: It's likely that this might be out of my league and I'm willing to tone down my ambitions if need be.

Alternatively I'd be looking for a more simple implementation of the hover effect, such as the one you can see here: (https://pixelgrade.com/demos/themes/?product=listable) or go with an even more simple solution, which is quite likely where I will end up. :P

Thanks in advance!