By
Jimi Wikman
One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com and seeing if we can recreate it with only HTML and CSS!
/// Timestamps
00:00 - Introduction
01:17 - Overview
02:18 - HTML
13:57 - CSS basic setup
15:35 - styling the front
28:24 - front and background hover
38:15 - animating the game name
42:43 - the rank
46:33 - styling the back
60:14 - fixing the spacing
65:31 - fade-up and in for the back