When you want to showcase various files on your web page this snippet of pure CSS code by Aleksandar Čugurović will be a life saver. There are five different file types you can choose from. When you hover over these, there is a subtle animation that reveals the file type icon.
If you are having trouble with the pen, try the archived copy on GitHub
See the Pen Pure CSS – File icons with nice hover animation by Aleksandar Čugurović (@mauriceconchis) on CodePen.0