<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"> <ul> <li><input type="checkbox" id="cb1" /> <label for="cb1"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></label> </li> <li><input type="checkbox" id="cb2" /> <label for="cb2"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></label> </li> <li><input type="checkbox" id="cb3" /> <label for="cb3"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></label> </li> <li><input type="checkbox" id="cb4" /> <label for="cb4"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></label> </li> </ul> </div> <button id="btn">Selections</button>

ul { list-style-type: none; } li { display: inline-block; } input[type="checkbox"][id^="cb"] { display: none; } label { border: 1px solid #fff; padding: 10px; display: block; position: relative; margin: 10px; cursor: pointer; } label:before { background-color: white; color: white; content: " "; display: block; border-radius: 50%; border: 1px solid grey; position: absolute; top: -5px; left: -5px; width: 25px; height: 25px; text-align: center; line-height: 28px; transition-duration: 0.4s; transform: scale(0); } label img { height: 100px; width: 100px; transition-duration: 0.2s; transform-origin: 50% 50%; } :checked + label { border-color: #ddd; } :checked + label:before { content: "✓"; background-color: grey; transform: scale(1); } :checked + label img { transform: scale(0.9); box-shadow: 0 0 5px #333; z-index: -1; }

$(document).ready(function(){ $("#btn").click(function(){ alert(cb1); }); });