<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-2"> <div class="content"> <img class="img-responsive" src="http://wallpaper-gallery.net/images/image/image-13.jpg" alt="..." class="img-rounded"> </div> </div> <div class="col-md-2"> <div class="content"> <img class="img-responsive" src="http://wallpaper-gallery.net/images/image/image-13.jpg" alt="..." class="img-rounded"> <div class="title">test</div> </div> </div> <div class="col-md-2"> <div class="content"> <img class="img-responsive" src="http://wallpaper-gallery.net/images/image/image-13.jpg" alt="..." class="img-rounded"> </div> </div> </div>

row { margin: 80px 0px 80px 0px; } .content { margin: 10px 10px 10px 10px; width:140px; height:140px; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); transition-duration: 0.3s; -webkit-transition-duration: 0.3s; /* Safari */ } .content:hover{ -ms-transform: scale(2.5); -moz-transform: scale(2.5); -webkit-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); position:relative; z-index:100; }

$(function() { //run when the DOM is ready $(".content").click(function() { //use a class, since your ID gets mangled $('.content').removeClass('contentDisplay'); $(this).addClass("contentDisplay"); //add the class to the clicked element }); });