☀ Check out our new pay-what-you-want Webflow portfolio template — Exhibit
Guides
Examples
A Cool Card Hover Interaction

A Cool Card Hover Interaction

Jan 28, 2023

Preview example (live)Preview example (read-only)
A Cool Card Hover Interaction

Class breakdown

Card (Class)

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.

Card Content (Class)

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%.

Card Image (Class)

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.

Card structure

The interaction

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.

Pressed 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.

Video