<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" style="padding-top: 60px"> <div class="row portfolio"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?1" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs btn-lg pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?2" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?3" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?4" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?5" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?6" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?7" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?8" alt="The awesome description" data-toggle="modal" data-target="#myModal"> <div class="caption"> <p class="btn btn-default btn-xs pull-right" rel="tooltip"><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i><i class="fa fa-heart-o"></i></p> <div class="clearfix"></div> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Im the awesome cat!</h4> </div> <div class="modal-body"> <img class="img-responsive" src="http://lorempixel.com/600/400/cats/?42" alt="The awesome description"> </div> </div> </div> </div> </div>

.portfolio .thumbnail { position: relative; } .portfolio .thumbnail:hover { cursor: pointer; } .portfolio .caption { bottom: 0; position: absolute; } .portfolio .btn { opacity: 0.75; }