"Information Card Flip"
Bootstrap 3.2.0 Snippet by mikecasas

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Flash Card Flip</h2> <!-- Info Card with social icons --> <div class="info-card"> <div class="front"> <img class="card-image" src="http://i.imgur.com/QHxnyes.jpg?1"> </div> <div class="back"> <h2>The French Revolution</h2> <p> Began on December 7, 1941 </p> <div class="social"> <span>Place things here</span> <a href="#" class="social-icon facebook animate"><span class="fa fa-facebook"></span></a> <a href="https://twitter.com/MichaelCanlas7" target="_blank" class=" social-icon twitter animate"><span class="fa fa-twitter"></span></a> <a href="https://github.com/ironprice91" target="_blank" class=" social-icon github animate"><span class="fa fa-github-alt"></span></a> </div> </div> </div> <!-- Scrolling enabled for longer content --> <div class="info-card"> <div class="front"> <img class="card-image" src="http://i.imgur.com/QHxnyes.jpg?1"> </div> <div class="back"> <h2>The American Revolution</h2> <p> Began on December 7, 1941 </p> </div> </div> </div>
@import url(//fonts.googleapis.com/css?family=Lato:400,900); @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .info-card { float: left; margin: 10px; -webkit-perspective: 600px; } .front, .back { background: #FFF; border-radius: 10px; transition: -webkit-transform 1s; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; border: 1px solid black; } .front { overflow: hidden; width: 250px; height: 330px; position: absolute; z-index: 1; } .back { padding: 20px; padding-top: 0px; width: 250px; height: 330px; -webkit-transform: rotateY(-180deg); overflow: scroll; } .info-card:hover .back { -webkit-transform: rotateY(0); } .info-card:hover .front { -webkit-transform: rotateY(180deg); } .card-image { width: 100%; height: 100%; } /* Social buttons */ .social { list-style: none; padding: 0px; margin-top: 25px; text-align: center; } .social a { position: relative; display: inline-block; min-width: 40px; padding: 10px 0px; margin: 0px 5px; overflow: hidden; text-align: center; background-color: rgb(215, 215, 215); border-radius: 40px; } a.social-icon { text-decoration: none !important; box-shadow: 0px 0px 1px rgb(51, 51, 51); box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7); } a.social-icon:hover { color: rgb(255, 255, 255) !important; } a.facebook { color: rgb(59, 90, 154) !important; } a.facebook:hover { background-color: rgb(59, 90, 154) !important; } a.twitter { color: rgb(45, 168, 225) !important; } a.twitter:hover { background-color: rgb(45, 168, 225) !important; } a.github { color: rgb(51, 51, 51) !important; } a.github:hover { background-color: rgb(51, 51, 51) !important; }

Related: See More


Questions / Comments: