CSS Flip Cards

These Concrete CMS CSS flip cards create interactive elements that rotate to reveal hidden content when users click a button. Using the CSS transform property and 3D space techniques, these dynamic two-sided flip cards add depth to any website without complex JavaScript. The CSS card flip effect has four templates (Flip Card Right, Flip Card Left, Flip Card Down, Flip Card Up), float the flip card block to the left, centre or right within an area. The titles, back text, front flip card button areas have a semi transparent background and the block has a subtle drop shadow with a white border. There are twelve link button colours to choose from (colours are chosen for accessibility and cannot be changed) and a small piece of javascript to activate the CSS animation. The front button and rear ‘Flip’ button are not really needed, they just give visitors a visual reference point to click on and maybe save confusion!

Features:

1. Four templates to create different flip effects (Right, Left, Up and Down)
2. The chosen card front image is also shown on the reverse side of a card with 50% opacity
3. Semi transparent background to the title, text and flip button
4. Subtle box shadow and white border to the cards
5. Twelve coloured page link buttons to choose from (for accessibility colours cannot be changed)
6. Option to float the block left, centre or right
7. Rear text scrolls on small devices (as far as we tested)
8. Fully responsive and accessible