.flipbox.flipbox-horizontal{ .flipbox-extend(740px, 320px, 2s); margin: 20px auto; .card-cover{ background: #ACE539; } .card-content { color: #FFF; background: rgba(51, 51, 51, 1); } }
CSS-Flipbox
CSS Only Flip Effect
Middle horizontal axis
.flipbox.flipbox-page.flipbox-horizontal{ .flipbox(800px, 320px, 0.6s); margin: 60px auto; .card-cover{ background: #ACE539; } .card-content-top, .card-content-bottom{ background: rgba(0, 0, 0, 0.25); } }
Title background
lorem ipsum dolor sit amet consectuer
Vertical axis
.flipbox.flipbox-vertical .flipbox-extend(740px, 320px, 2s); margin: 20px auto; .card-cover{ background: #ACE539; } .card-content { color: #FFF; background: rgba(51, 51, 51, 1); } }
Vertical flip axis
<div class="flipbox flipbox-simple flipbox-vertical"> <div class="wrapper"> <div class="card card-cover" style="background: url(http://placehold.it/740x320);"> </div> <div class="card card-content"> <h1><span>Lorem ipsum dolor sit amet</span></h1> <p>Consectetur adipiscing elit. Ut ut est metus. Nullam imperdiet efficitur erat non accumsan. In molestie venenatis eros eget ullamcorper. Cras volutpat tellus ornare mattis mattis. Vestibulum vestibulum a orci vestibulum dictum.</p> </div> </div> </div>
Horizontal axis
Horizontal flip axis
<div class="flipbox flipbox-simple flipbox-horizontal"> <div class="wrapper"> <div class="card card-cover" style="background: url(http://placehold.it/740x320);"> </div> <div class="card card-content"> <h1><span>Lorem ipsum dolor sit amet</span></h1> <p>Consectetur adipiscing elit. Ut ut est metus. Nullam imperdiet efficitur erat non accumsan. In molestie venenatis eros eget ullamcorper. Cras volutpat tellus ornare mattis mattis. Vestibulum vestibulum a orci vestibulum dictum.</p> </div> </div> </div>