<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="col-sm-12 no-gutter">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a href="#"><img src="http://lorempixel.com/20/20" class="img-circle " alt="Cinque Terre" >Ajith Kumar</a><div class=" small pull-right text-right">11pm<br>12,may 2015</div></h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
</div>
<div class="col-xs-2 panel-footer things">
<a href="#"><i class="glyphicon glyphicon-hand-up"></i></a>
<a href="#"><i class="glyphicon glyphicon-hand-down"></i></a>
<a href="#"><i class="glyphicon glyphicon-comment"></i></a>
<a href="#"><i class="glyphicon glyphicon-share"></i></a>
</div>
</div>
</div>
</div>
.things{
opacity:0.3;
}
.panel:hover .things{
display:block;
opacity: 1;
transition: width, border opacity .0s linear .2s;
-webkit-transition: width, border opacity .0s linear .2s;
-moz-transition: width, border opacity .0s linear .2s;
-ms-transition: width, border opacity .0s linear .2s;
transition: opacity .2s linear .2s;
-webkit-transition: opacity .2s linear .2s;
-moz-transition: opacity .2s linear .2s;
-ms-transition: opacity .2s linear .2s;
}
.panel-footer{
background-color:#ffffff !important;
font-size:16px;
}
