<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>Info 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>Gentlesir</h2>
<p>
Globally facilitate timely bandwidth vis-a-vis user friendly core competencies. Uniquely architect covalent e-tailers through viral Lorem ipsum dolor sit amet, con.
</p>
<div class="social">
<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>Gentlesir</h2>
<p>
Professionally redefine enterprise functionalities through cutting-edge interfaces. Monotonectally promote multimedia based meta-services with orthogonal alignments. Professionally initiate backward-compatible data for progressive results. Globally reinvent quality ideas and flexible architectures. Seamlessly syndicate long-term high-impact innovation whereas error-free systems.
Credibly leverage other's bleeding-edge outsourcing and unique catalysts for change. Holisticly productivate cooperative portals vis-a-vis granular value. Compellingly morph e-business imperatives vis-a-vis empowered ROI. Compellingly iterate principle-centered customer service after plug-and-play relationships. Enthusiastically extend error-free experiences whereas standards compliant communities.
Rapidiously actualize exceptional bandwidth via economically sound networks. Quickly simplify go forward platforms via 24/7 "outside the box" thinking. Authoritatively synergize fully tested functionalities through an expanded array of e-tailers. Completely visualize cross-media leadership skills and value-added initiatives. Conveniently administrate innovative internal or "organic" sources vis-a-vis turnkey paradigms.
Objectively leverage existing high-quality partnerships whereas client-centered e-markets. Globally procrastinate adaptive total linkage and orthogonal sources. Quickly incentivize effective results via multimedia based services. Conveniently reinvent team building networks through synergistic models. Credibly negotiate bleeding-edge opportunities via mission-critical models.
Synergistically simplify strategic imperatives vis-a-vis an expanded array of human capital. Intrinsicly re-engineer B2C sources vis-a-vis interactive ROI. Appropriately promote collaborative architectures through focused relationships. Uniquely transition client-focused data for an expanded array of niches. Authoritatively transform fully tested scenarios without proactive sources.
Phosfluorescently actualize flexible methods of empowerment via corporate supply chains. Compellingly monetize cost effective growth strategies after highly efficient imperatives. Dramatically grow high standards in functionalities vis-a-vis synergistic web services. Completely pursue empowered materials after integrated infrastructures. Objectively evolve go.
</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;
}
