Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Multi Flip Cards

Multi Flip Cards

My goal was to create re-useable card-like elements that flip on hover (or tap!). I've built markup for a flippable card that you can use to hold any content you want on the front or the back of the card. Simply set the size of the containing .flip-card element and put whatever you want into .front and .back and style accordingly. It gracefully degrades too: Webkit: Cards flip with a 3D effect Firefox & IE10: Cards flip but no 3d effect IE9 and down: Back instantly appears on hover

Author:
Andy McFee
Created:
DECEMBER 11, 2012
Made with:
HTML, CSS

Find the Demo

See the Pen Multi Flip Cards by Andy McFee (@andymcfee) on CodePen.

Advertisement