<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 ----------> <!-- Reference: https://github.com/ashleydw/lightbox/ --> <script src="//rawgithub.com/ashleydw/lightbox/master/dist/ekko-lightbox.js"></script> <div class="container mt40"> <section class="row"> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/nature/4" title="Nature Portfolio" class="zoom" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/nature/4" alt="Nature Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Nature Portfolio">Nature</a></h4> <span class="pull-right"> <i id="like1" class="glyphicon glyphicon-thumbs-up"></i> <div id="like1-bs3"></div> <i id="dislike1" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike1-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/food/2" title="Food Portfolio" class="zoom" data-title="Delicious Food" data-footer="Whatever your desire" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/food/2" alt="Food Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Food Portfolio">Food</a></h4> <span class="pull-right"> <i id="like2" class="glyphicon glyphicon-thumbs-up"></i> <div id="like2-bs3"></div> <i id="dislike2" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike2-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/sports/3" title="Sports Portfolio" class="zoom" data-title="Radical Sports" data-footer="This are the best moments" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/sports/3" alt="Sports Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="Sports Portfolio" title="Sports">Sports</a></h4> <span class="pull-right"> <i id="like3" class="glyphicon glyphicon-thumbs-up"></i> <div id="like3-bs3"></div> <i id="dislike3" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike3-bs3"></div> </span> </div> </div> </article> <article class="col-xs-12 col-sm-6 col-md-3"> <div class="panel panel-default"> <div class="panel-body"> <a href="http://lorempixel.com/350/350/people/1" title="People Portfolio" class="zoom" data-title="Beautiful People" data-footer="We create relationships" data-type="image" data-toggle="lightbox"> <img src="http://lorempixel.com/350/350/people/1" alt="People Portfolio" /> <span class="overlay"><i class="glyphicon glyphicon-fullscreen"></i></span> </a> </div> <div class="panel-footer"> <h4><a href="#" title="People Portfolio">People</a></h4> <span class="pull-right"> <i id="like4" class="glyphicon glyphicon-thumbs-up"></i> <div id="like4-bs3"></div> <i id="dislike4" class="glyphicon glyphicon-thumbs-down"></i> <div id="dislike4-bs3"></div> </span> </div> </div> </article> </section> </div>

@import "http://fonts.googleapis.com/css?family=Roboto:300,400,500,700"; .mt40 { margin-top: 40px; } .panel { position: relative; overflow: hidden; display: block; border-radius: 0 !important; } .panel-default { border-color: #ebedef !important; } .panel .panel-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; } .panel .panel-body a { overflow: hidden; } .panel .panel-body a img { display: block; margin: 0; width: 100%; height: auto; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .panel .panel-body a.zoom:hover img { transform: scale(1.3); -ms-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); -moz-transform: scale(1.3); } .panel .panel-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: hidden; height: 100%; width: 100%; background-color: #000; opacity: 0; transition: opacity .25s ease-out; -moz-transition: opacity .25s ease-out; -webkit-transition: opacity .25s ease-out; -o-transition: opacity .25s ease-out; } .panel .panel-body a.zoom:hover span.overlay { display: block; visibility: visible; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; } .panel .panel-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)"; } .panel .panel-footer { padding: 8px !important; background-color: #f9f9f9 !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } .panel .panel-footer h4 { display: inline; font: 400 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e margin: 0 !important; padding: 0 !important; } .panel .panel-footer i.glyphicon { display: inline; font-size: 1.125em; cursor: pointer; } .panel .panel-footer i.glyphicon-thumbs-up { color: #1abc9c; } .panel .panel-footer i.glyphicon-thumbs-down { color: #e74c3c; padding-left: 5px; } .panel .panel-footer div { width: 15px; display: inline; font: 300 normal 1.125em "Roboto",Arial,Verdana,sans-serif; color: #34495e; text-align: center; background-color: transparent !important; border: none !important; }

$(document).ready(function() { $('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){ var $this = $(this), c = $this.data('count'); if (!c) c = 0; c++; $this.data('count',c); $('#'+this.id+'-bs3').html(c); }); });