Discover the best card-flip websites created by professional designers. Get inspired and start planning your perfect card-flip web design today!

Saw something like this on the WeTransfer website the other day and wanted to see if I could recreate it in Webflow. 

Hover over the stack to fan the cards and show off the beautiful images. Feel free to clone and modify the project. 

Illustrations by - https://dribbble.com/PatrykW

Card Fan on Hover

Welcome to Daily Interaction #129.

This demo showcases a 180° project card animation on hover and click.

With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information.

For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.

Discover card flip websites built by the Webflow community

Discover card flip websites built by the Webflow community