I recently came across a cool effect on a blog (I believe the original design came from theGhost platform). When you hover over a card that links to an article, there's a transition that expands the card slightly - it goes back to its original size when you move the mouse away from it.

I tend to appreciate simple, minimalist designs that don't overwhelm the user. I avoid in-your-face effects, transitions, and animations. Here however, the effect is subtle, yet I find that it adds a nice touch of sophistication to the design.

In addition to the hover effect, I liked this card design, so I reverse-engineered it from scratch, using flexbox for layout.

Below is the result of my efforts in codepen:

Hover Effect

The hover effect is achieved with the following CSS:

.fancy_card:hover{transform:translate3D(0,-1px,0)scale(1.03);}

I got this CSS from the original site. I think it's quite clever: Not only do we expand the card slightly, but we also slide it upward a little bit at the same time.

This effect works smoothly in current versions of Chrome and Firefox, but it looks choppy in Edge.

Box Shadow

I also got the following parameters from the original site:

.fancy_card{box-shadow:8px14px38pxrgba(39,44,49,.06),1px3px8pxrgba(39,44,49,.03);transition:all.5sease;/* back to normal */}.fancy_card:hover{box-shadow:8px28px50pxrgba(39,44,49,.07),1px6px12pxrgba(39,44,49,.04);transition:all.4sease;/* zoom in */}

I like the application of two box shadows (separated by commas), and how the box shadow expands when hovering over a card. Note also the slightly different timing for the forward and back transitions. I think these kinds of subtle cues aren't noticeable at a conscious level, but they contribute to an overall sense of quality when using a well-designed site.

Centering

Below are a few more notes on the CSS design. I like how flexbox makes centering simple, both horizontally and vertically. The CSS below centers the card in the window:

.container{display:flex;min-height:100vh;/* expand height to center contents */height:100vh;justify-content:center;/* center horizontally */align-items:center;/* center vertically*/}

The following CSS vertically aligns the user's profile image and the reading duration text in the footer of the card:

.card_footer{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;/* vertically align content */}

Header Image

I found that my header image was expanding beyond the boundaries of its container and hiding the rounded corners. This can be fixed by applyingoverflow: hidden to its parent:

.fancy_card{overflow:hidden;/* otherwise header image won't respect rounded corners */}

I also discovered that the header image got stretched out vertically and did not respect its aspect ratio. With a bit of searching, I found a solution that seems to work:

.card_image{width:100%;/* forces image to maintain its aspect ratio; otherwise image stretches vertically */}

Surprisingly, this change alone seems to solve the problem (at least for modern browsers).

The complete HTML/CSS is available onCodePen, so feel free to take a look if you're interested.