Material Design Card Flip Pure CSS – Direction Aware

Growing more and more attached with Material Design, here’s a card flip effect which reacts to which direction your mouse is in when you hover. This concept can be applied to blog excerpts, image galleries, or to show your contact information.

To compile the SCSS to CSS, click on EDIT ON CODEPEN and a new window will open. On the CSS code box, click the arrow on the right and choose View Compiled CSS.

See the Pen Material Design Card Flip by Elmer Balbin (@elmzarnsi) on CodePen.27172

The direction aware works by adding two divs (left & right) inside the main .card-container. You can then control the rotation by using the general sibling combinator ~ (tilde) to select .card depending on which side was hovered. Like so:

.left:hover ~ .card {}
.right:hover ~ .card {}

Elmer Balbin

Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.

Buy me a burgerBuy me a burger

1
Leave a comment

avatar
newest oldest
trackback
Direction Aware Tiles Pure CSS

[…] my previous work which only used two elements to determine which side the card will flip, I’ve decided to use […]