Jan 28, 2023
This is the wrapper for the card and its content. It's 30 REMs in width and 35 REMs in height with a 1 REM border radius. It also has a hidden overflow, a relative position and a pointer cursor.
In order to place the content of the card at the bottom of the card itself, it has a flex setting of justify-content: flex-end.
The Card Content class is placed inside the Card class. Its children (heading & paragraph) are spaced out vertically using flex with a gap of 0.5 REMs. It also has some padding, and the most important part is that it has a set height of 20%.
The Card Image class contains a background image. It has a set height of 80%, taking up the rest of the cards' space (Card Content (20%) + Card Image (80%) = 100%). This one is set to an absolute position, making it able to stack on top of the Card Content when hovered.
The interaction is a "Mouse Hover"-interaction placed on the Card class. It contains 2 keyframes; setting the height of the Card Image from 80% (initial) to 100% (when hovered) and reducing the Card Content opacity from 100% (initial) to 0% (when hovered).
The Hover Out interaction is simply a reverse back to its original state.
In order to make the card feel like a "button", we're setting a pressed state on the Card class. It simply scales it down a tiny bit, from 1 (default) to 0.975 (pressed). In order to make it smooth, we're adding a transition of the transform property with some easing.