The card displays a static background image by default. On hover, the background-image property transitions to an animated GIF. A pseudo-element preloads the GIF using a before rule positioned off-screen, preventing the flash that would otherwise occur on first hover.

An after pseudo-element creates a semi-transparent black overlay on hover, fading in at 50% opacity. This improves text readability against the animated background. The transition duration is set to 500ms for smooth state changes.

Text content sits above both the background and overlay using relative positioning and z-index. The card has a fixed height with content aligned to the bottom using flexbox.

Good for creative portfolios, entertainment sites, gaming landing pages, and any design where you want surprise and delight on hover.