X
Back to the
Component Shop Read this first! Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Drop-down Easy Mega Menu Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table
☰

Flip-card

Chrysanthemum

Chrysanthemum

Sometimes called mums or chrysanths, are flowering plants of the genus
Chrysanthemum in the family Asteraceae. They are native to East Asia and northeastern Europe. Most species originate from East Asia and the center of diversity is in China. Countless horticultural varieties and cultivars exist.
(Wikipedia)

Rose

Rose

A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and tens of thousands of cultivars. They form a group of plants that can be erect shrubs, climbing, or trailing, with stems that are often armed with sharp prickles. Most species are native to Asia, with smaller numbers native to Europe, North America, and northwestern Africa.
(Wikipedia)

Hover over the cards. They have an image on the front, and some information on the back. They can be used for many purposes. It is possible to change the CSS code for the transformation, to make the cards flip horizontally instead of vertically. See comments in the css file. Note: If they are changed, they both need to rotate the same way. Unfortunately, this component does not work properly in IE11.

Download the component.