A Simple but Sweet Card Hover Interaction

Class breakdown

Card

The Card class contains the card itself. It has a vertical flex setting with 1 REM gap in order to space out its children; the image and the content.

It also has a relative position in order for the button wrapper to be relative to the whole card.

Card Image Wrapper

In order to create the scaling hover effect for the image, we need a wrapper with a hidden overflow. This class also has the height of the card; 25 REM and a border radius of 1 REM.

It also has a relative position in order for the image to be positioned inside using an absoute position.

Card Image

The image itsel uses an absolute full position, relative to the image wrapper. It also has a width & height of 100%, and a fit of cover.

Card Content Wrapper

The Card Content Wrapper contains the content (the heading in this case) and is used in the interaction. It has a left & right padding of 1 REM and that's it.

Card Button Wrapper

The Card Button Wrapper contains the button / tag on the top of the card. It uses flex to position it top left.

It has an absolute position relative to the Card class, and spans on top of the whole card. In order to make sure it stays on top, it has a higher z-index than the rest of the elements.

Card Button

The Card Button is a simple 3 REM sized white div with an icon inside. It has a border-radius of 50 REM in order to make it fully round.

It's positioned "outside" of the card using a -1.5 REM (half its own size) negative margin on the top, and a 1.5 REM margin on the left.

The interaction

The mouse hover interaction is placed on the Card class.

It starts off with a transform (move) keyframe on the Card itself. It moves it -0.5 REM on the y-axis. At the same time, the Card Content Wrapper is animated in reverse; from -0.5 REM to 0 REM on the y-axis. The Card Content Wrapper also animates its opacity from 0% to 100%. This creates a kind of "reveal" effect.

Next, the Card Button scales from 0 to 1 and rotate from 0 deg to -45 deg on the z-axis. This creates a nice movement effect, since the button has an arrow pointed right.

The last part of the interaction is the image, which scales from 1 to 1.05, making a zooming effect.

The hover out interaction is exactly the same, but in reverse.