Blog Preview Card With Cool Video Effect

What challenges did you encounter, and how did you overcome them?

Challenges:

Show a video when the user hover over the image. This was by far the biggest challenge of this solution, because:

• Overlay the image and the video in the same container, so they can be tin the same position when the image "disappear" and show the video behind it.
• Add the video { display: none; }; and make it transition to display video { display: block; };

See hover and focus states for all interactive elements on the page.