<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <div class="row"> <div class="col-lg-2 note_cover"> <div class="notes_div"> <div class="notes_head"> <p class="notes_header"> <span class="notes_type label label-info notes_tag"><i class="icon-beer"></i>  Event</span> <span class="notes_time_left label label-info notes_tag"><i class="icon-time"></i>  Tomorrow</span> </p> </div> <div class="notes_content"> <div class="notes_short notes_partition"> <p class="notes_person"><img src="http://www.huffmancode.com/img/sumit.jpg" width="30">  Sumit Chudasama</p> <p class="notes_title text-info"><i class="icon-beer"></i>  Birthday party</p> </div> <div class="notes_action "> <p><span class="btn btn-default task_btn">View</span> <span class="btn btn-success task_btn">Mark as done</span></p> </div> </div> </div> </div> </div>

.notes_div{ position: absolute; bottom: -248px; overflow: hidden; height: 70px; border-radius: 2px; color: #7F7F7F; background: white; width: 98%; } .notes_div:hover{ -webkit-transition: height 0.3s ease-in-out; -moz-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; height: 250px; } .notes_div i{ font-size: 1em; } .notes_head{ } .notes_header{ background: whitesmoke; border-bottom: 1px solid lightgray; padding:5px; text-align: right; } .notes_content{ font-size: 0.8em; } .notes_short{ padding:5px 10px; } .notes_person{ } .notes_title{ font-size: 1.2em; } .notes_detail{ padding: 10px; } .notes_partition{ border-bottom: 1px solid #ccc; padding:5px 10px; } .notes_action{ text-align: center; padding: 10px; } #genSkypeCall p{ text-align: center; }