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

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment

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 […]

Get great deals on hotel rooms from all over the world BOOK NOW