<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <div class="[ col-md-4 ]"> <div class="[ info-card ]"> <div class="box"> <div class="steps"> <div class="each-step"> <p>1</p> </div> </div> </div> <div class="[ info-card-details ] animate"> <div class="[ info-card-header ]"> <p><em>Click.</em></p> </div> <div class="[ info-card-detail ]"> <!-- Description --> <p>The idea of creating something out of nothing has always generated a passion in my heart. </p> </div> </div> </div> </div> <div class="[ col-md-4 ]"> <div class="[ info-card ]"> <div class="box"> <div class="steps"> <div class="each-step"> <p>1</p> </div> </div> </div> <div class="[ info-card-details ] animate"> <div class="[ info-card-header ]"> <p><em>Click.</em></p> </div> <div class="[ info-card-detail ]"> <!-- Description --> <p>The idea of creating something out of nothing has always generated a passion in my heart. </p> </div> </div> </div> </div> <div class="[ col-md-4 ]"> <div class="[ info-card ]"> <div class="box"> <div class="steps"> <div class="each-step"> <p>1</p> </div> </div> </div> <div class="[ info-card-details ] animate"> <div class="[ info-card-header ]"> <p><em>Click.</em></p> </div> <div class="[ info-card-detail ]"> <!-- Description --> <p>The idea of creating something out of nothing has always generated a passion in my heart. </p> </div> </div> </div> </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); .animate { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .info-card { width: 100%; position: relative; margin: 20px 0; overflow: hidden; } .info-card .box { display: table; width: 100%; height: 50px; margin-bottom: 50px; text-align: center; backgrond-color: red; } .info-card .box p { display: table-cell; vertical-align: middle; padding-left: 10px; } .steps { text-align: center; } .each-step { margin: 20px auto; text-align: center; padding-top: 5px; background-color: black; color: white; height: 30px; width: 30px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .info-card:hover .each-step { background-color: #37c2ff; } .steps em { font-size: 1.2em; } .info-card .info-card-details, .info-card .info-card-details .info-card-header { width: 100%; height: 100%; position: absolute; bottom: -100%; left: 0; background: rgb(255, 255, 255); text-align: center; } .info-card .info-card-details .info-card-header { height: auto; bottom: 100%; padding: 10px 5px; } .info-card:hover .info-card-details { bottom: 0px; overflow: none; padding-bottom: 25px; } .info-card:hover .info-card-details .info-card-header { position: relative; bottom: 0px; }