Material Design Flip Card

in Development

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.

  • Related Content by Tag

Write a Comment