<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="row"> <section class="check"> <div class="container"> <h3 style="text-align:center;">Please select any look book</h3> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="#javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="#javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="#javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="please-select"> <a href="#javascript:void(0)"><img src="http://pictures.thegoldendiamonds.com/wp-content/uploads/2013/02/20130226-225137.jpg" alt="icon" /></a> <span class="glyphicon check-image"></span> </div> </div> </div> </section> </div> </div>

.check{width:100%;float:left;} .check img{max-width:100%;} .please-select{width:100%;float:left; position: relative;margin-bottom:30px;} .please-select .check-image{ position: absolute; top: 50%; left: 50%; color: #0c800c; font-size: 25px; transform: translateX(-50%)translateY(-50%); background: #fff;-webkit-transform: translateX(-50%)translateY(-50%);-moz-transform: translateX(-50%)translateY(-50%); padding: 10px;}

$(document).ready(function() { $('.please-select').click(function(){ //alert('dasdas'); $(this).find('.check-image').toggleClass('glyphicon-ok') $(this).parent().siblings().find('.check-image').removeClass('glyphicon-ok'); }); });