Hearthstone card effect in CSS | HTML5 Game Development (original) (raw)

An interesting question was posed via Twitter recently. It was about finding a way to create a card browse/hovering effect like the one in the popular card game Hearthstone using HTML, CSS or JS_._ Among many responses two Codepens were created. They tried to simulate the Hearthstone card effect in CSS only.Hearthstone card effect in CSS - tweet screenshot

The first card-selector is a good attempt, the card effect is nice, fluid and responsive. It can definitely relate to the original. Consequently, inspired by this pen and the tweet, another attempt was made.

Card hover effect with aces and king

This one also feels and looks like Hearthstone. It’s done pretty well using HTML/CSS. The motions are pretty fluid and the effect is good too. It’s amazing what can be done using mostly CSS.

Hearthstone hover effect rainbow cards

Check out the pens to get a better look and here is the tweet in case you want to find out more.

Cards, Codepen, CSS, Hearthstone, image effects, Open-source, Twitter

HTML5 Demos, Misc