<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 ----------> <label> <img src="https://tinyurl.com/ycvhwwhe" class="img-check" alt="..."> <input type="radio" name="" id="" value="" autocomplete="off" class="hidden"> </label> <label> <img src="https://tinyurl.com/ycvhwwhe" class="img-check" alt="..."> <input type="radio" name="" id="" value="" autocomplete="off" class="hidden"> </label> <label> <img src="https://tinyurl.com/ycvhwwhe" class="img-check" alt="..."> <input type="radio" name="" id="" value="" autocomplete="off" class="hidden"> </label> <label> <img src="https://tinyurl.com/ycvhwwhe" class="img-check" alt="..."> <input type="radio" name="" id="" value="" autocomplete="off" class="hidden"> </label> <label> <img src="https://tinyurl.com/ycvhwwhe" class="img-check" alt="..."> <input type="radio" name="" id="" value="" autocomplete="off" class="hidden"> </label>

body { padding: 50px; text-align: center; } label { box-shadow: 0 1px 1px #eee; } label img { width: 100%; max-width: 100px; padding: 15px; } label .checked { opacity: 0.5; box-shadow: 0 5px 10px #ddd; }

$(document).ready(function(e) { $('.img-check').click(function(e) { $('.img-check').not(this).removeClass('checked').siblings('input').prop('checked', false); $(this).addClass('checked').siblings('input').prop('checked', true); }); });