Styled Card (Toggle Horizontal Flip) Flipping Animation - Add a horizontal toggle flipping styled card for showing information on the back side of your images.
Example: View Code Demo
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Create a HTML5 CSS3 Styled Card (Toggle Horizontal Flip) Flipping Animation</title> <meta name="description" content="CSS3 styled card (vertical flip) flipping animation effect uses CSS animations (transitions) to show the front and back of an element." /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Begin HTML5 CSS3 Styled Card (Toggle Horizontal Flip) Flipping Animation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: David Walsh : http://davidwalsh.name/ : Creative Commons License == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;} .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; border: 1px solid #ccc; } /* .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); filter: FlipH; -ms-filter: "FlipH"; } */ /* START: Accommodating for IE */ .flip-container:hover .back, .flip-container.hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-container:hover .front, .flip-container.hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* END: Accommodating for IE */ .flip-container, .front, .back { width: 332px; /* set the flip container to match image width */ height: 500px; /* set the flip container to match image height */ } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -o-transition: 0.6s; -o-transform-style: preserve-3d; -ms-transition: 0.6s; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: lightgreen; z-index: 2; } .back { background: lightblue; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .front .name { font-size: 2em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; display: none; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } .back-logo { position: absolute; top: 40px; left: 90px; width: 160px; height: 117px; background: url(image/logo.png) 0 0 no-repeat; /* only need an image if embedding on the flip side */ } .back-title { font-weight: bold; color: #00304a; position: absolute; top: 180px; left: 0; right: 0; text-align: center; text-shadow: 0.1em 0.1em 0.05em #acd7e5; font-family: Courier; font-size: 2em; } .back p { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; padding: 0 20px; } </style> </head> <body> <div id="contentHolder"> <h1>Create a CSS Flipping Animation</h1> <div class="p">Read <a href="http://davidwalsh.name/css-flip" target="_new">Create a CSS Flipping Animation</a></div> <div id="promoNode"></div> <p>Mouse over the image below or toggle it to see it flip!</p> <h2>Toggle Flip (Horizontal)</h2> <div class="flip-container" id="flip-toggle"> <div class="flipper"> <div class="front" style="background: url(image/pic.jpg) 0 0 no-repeat;"> <span class="name">David Walsh</span> </div> <div class="back" style="background:#f8f8f8;"> <div class="back-logo"></div> <div class="back-title">@davidwalshblog</div> <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> </div> </div> </div> <button onclick="document.querySelector('#flip-toggle').classList.toggle('hover');" class="sexyButton">Toggle Flip</button> <br /><br /> <div id="snippet"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_160.html">Styled Card (Toggle Horizontal Flip) Flipping Animation</a> page. ] </div> </div> </body> </html>