<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="card"> <div class="front"> <img src="https://place-hold.it/300x400" class="img-responsive"> </div> <div class="back"> <div class="details"> <h2>Hardik Trivedi<br><span>Web Designer</span></h2> <div class="s_icon"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-youtube"></i></a> <a href="#"><i class="fa fa-google-plus-square"></i></a> </div> </div> </div> </div> </div> </div> </div>

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700'); body { font-family: 'Josefin Sans', sans-serif !important; } .card { top: 50%; position: absolute; /* transform: translate(-50%, -50%);*/ width: 300px; height: 400px; transform-style: preserve-3d; perspective: 600px; transition: .5s; } .card .front { position: absolute; width: 100%; height: 100%; background: #000; backface-visibility: hidden; transform: rotateX(0deg); transition: .5s; } .card:hover .front { transform: rotateX(-180deg); } .card .back { position: absolute; width: 100%; height: 100%; background: #000; backface-visibility: hidden; transform: rotateX(180deg); transition: .5s; } .card:hover .back { transform: rotateX(0deg); } .card .back .details { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; padding: 20px; box-sizing: border-box; transform: translateY(-50%); } .card .back .details h2 { font-size: 24px; color: #fff; } .card .back .details h2 span { color: #d6d6d6; font-size: 16px; } .s_icon { padding: 10px 0; } .s_icon a { display: inline-block; width: 36px; height: 36px; text-align: center; background-color: #262626; text-decoration: none; border-radius: 50%; transition: .5s; } .s_icon a .fa { line-height: 36px; }