Material Design Card Flip Pure CSS – Direction Aware

Growing more and more attached to Material Design, here’s a card flip effect that 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.

The ‘direction aware’ works by adding two divs (left and 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.

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

Note: I’ve made a new pen using four sides, instead of only two, in my other post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.