Profile Cards Flip View

index.html

<div class="main-container">
    <div class="row">  
      <div class="col-sm-10 col-sm-offset-1">
         <div class="col-md-offset-4 col-sm-offset-3 col-md-4 col-sm-6">
             <div class="card-container">
                <div class="card">
                    <div class="front">
                        <div class="cover">
                            <img src="http://i.imgur.com/8CkzoaL.png"/>
                        </div>
                        <div class="user">
                            <img class="img-circle" src="http://joashpereira.com/images/joash.png"/>
                        </div>
                        <div class="content text-center">
                            <div class="main">
                                <h3 class="name">Joash Pereira</h3>
                                <p class="profession">Designer</p>
                                <h5><i class="fa fa-map-marker fa-fw text-muted"></i> Goa, India</h5>
                                <h5><i class="fa fa-building-o fa-fw text-muted"></i> JP Designs Inc. </h5>
                                <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> [email protected]</h5>
                            </div>
                        </div>
                    </div> <!-- end front panel -->
                    <div class="back">
                        <div class="header">
                            <h5 class="motto">"Life's a climb, but the view is great!"</h5>
                        </div> 
                        <div class="content">
                            <div class="main">
                                <h4 class="text-center">Experince</h4>
                                <p>4+ years experience</p>
                                <h4 class="text-center">Areas of Expertise</h4>
                                <p>Web design, Mobile UI/UX, Adobe Photoshop, HTML5, CSS3, AngularJS and many others...</p>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="social-links text-center">
                                <a href="https://www.facebook.com/joash.c.pereira" class="facebook"><i class="fa fa-facebook fa-fw"></i></a>
                                <a href="https://plus.google.com/u/0/+JoashPereira" class="google"><i class="fa fa-google-plus fa-fw"></i></a>
                                <a href="twitter.com/@im_joash" class="twitter"><i class="fa fa-twitter fa-fw"></i></a>
                            </div>
                        </div>
                    </div> 
                </div> 
            </div> 
        </div> 
    </div>
</div>

Profile Cards Flip View.markdown

Profile Cards Flip View

A Pen by Joash on CodePen.

License.

script.js

/* no javascript */

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

body {
    background-color: #2c3e50;
}
.main-container {
  padding: 100px 0px;
}

/* card container */
.card-container {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  margin-bottom: 30px;
}
/* flip the pane when hovered */

.card-container:hover .card,
.card-container.hover.manual-flip .card {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card-container.static:hover .card,
.card-container.static.hover .card {
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
}

.card {
  -webkit-transition: -webkit-transform .5s;
  -moz-transition: -moz-transform .5s;
  -o-transition: -o-transform .5s;
  transition: transform .5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during flip */

.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */

.front {
  z-index: 2;
}

.back {
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
  z-index: 3;
}

/*       your card style       */
.card {
  background: none repeat scroll 0 0 #FFFFFF;
  border-radius: 4px;
  color: #444444;
}

.card-container,
.front,
.back {
  width: 100%;
  height: 420px;
  border-radius: 4px;
}

.card .cover {
  height: 105px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}

.card .cover img {
  width: 100%;
}

.card .user {
  border-radius: 50%;
  display: block;
  height: 120px;
  margin: -55px auto 0;
  overflow: hidden;
  width: 120px;
}

.card .user img {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 4px solid #FFFFFF;
  width: 100%;
}

.card .content {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  padding: 10px 20px 20px;
}

.text-center {
  text-align: center;
}

.card .content .main {
  min-height: 160px;
}

.card .back .content .main {
  height: 215px;
}

.card .name {
  font-size: 22px;
  line-height: 28px;
  margin: 10px 0 0;
  text-align: center;
  text-transform: capitalize;
}

.card h5 {
  margin: 5px 0;
  font-weight: 400;
  line-height: 20px;
}

.card .profession {
  color: #999999;
  text-align: center;
  margin-bottom: 20px;
}

.card .footer {
  border-top: 1px solid #EEEEEE;
  color: #999999;
  margin: 30px 0 0;
  padding: 10px 0 0;
  text-align: center;
}

.card .footer .social-links {
  font-size: 18px;
}

.card .footer .social-links a {
  margin: 0 7px;
}

.card .footer .btn-simple {
  margin-top: -6px;
}

.card .header {
  padding: 15px 20px;
  height: 90px;
}

.card .motto {
  border-bottom: 1px solid #EEEEEE;
  color: #999999;
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
  text-align: center;
}
/*      card content style        */

.title {
  color: #506A85;
  text-align: center;
  font-weight: 300;
  font-size: 44px;
  margin-bottom: 90px;
  line-height: 90%;
}

.title small {
  font-size: 17px;
  color: #999;
  text-transform: uppercase;
  margin: 0;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />

@joashp Is it possible to add a background to this?